作為一名WEB前端程序員,相信每個人對瀏覽器的兼容都"情有獨鐘",下面就一些常用的瀏覽器的兼容列舉一二。

一、塊級元素（block）一般不轉化為inline-block,其實是因為瀏覽器的兼容問題，IE8以下的瀏覽器不 支持塊級元素轉化為行內塊元素(可以使用浮動)。

二.獲取元素樣式:
1.oDiv.style.background:
　　獲取到的是行內樣式的屬性
2.獲取顯示的樣式:
　　標準瀏覽器(IE9以下是不支持):
　　　　getComputedStyle(標簽元素,false).屬性名
　　IE9以下獲取內聯樣式:
　　　　標簽元素.currentStyle.屬性名

　　做瀏覽器的兼容:
　　if (oDiv.currentStyle) {
　　　　//在IE9以下
　　　　oDiv.currentStyle.width;
　　} else {
　　　　//標準瀏覽器
　　　　getComputedStyle(oDiv,false).width;
　　}

3.oDiv.offset.width=100;註意：不帶‘px‘，上面兩個獲取的帶‘px‘

三.獲取兄弟節點
　　nextSibling,previousSibling
　　在高級和IE9以上的瀏覽器裏面,兄弟節點會獲取到空格,在IE8以下,才能獲取到我們想要的元素節點

　　previousElementSibling,nextElementSibling
　　在高級和IE9以上的瀏覽器裏面,兄弟節點會獲取到對應的元素,在IE8以下,不能獲取到我們想要的元素節點

　　var oP1 = oP.previousElementSibling || oP.previousSibling;

四.獲取第一個或最後的兄弟節點
　　獲取節點,獲取第一個節點,獲取最後一個節點
　　父節點.firstChild;
　　父節點.lastChild;
　　1.兼容所有的瀏覽器
　　　　oUl.firstElementChild || oUl.firstChild
　　2.兼容所有的瀏覽器

五.向上滾動的距離:
　　1.在谷歌裏面:
　　　　document.body.scrollTop
　　2.在火狐、IE裏面:
　　　　document.documentElement.scrollTop
　　3.兼容所有瀏覽器:
　　　　var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
　　　　var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

六、事件綁定的兼容
　　if (obj.addEventListener) {
　　　　//在高級瀏覽器
　　　　obj.addEventListener(type,fn,false);
　　} else {
　　　　obj.attachEvent(‘on‘+type,fn)
　　}
　　事件移除的兼容
　　if (obj.removeEventListener) {
　　　　obj.removeEventListener(type,fn,false);
　　} else {
　　　　obj.detachEvent(‘on‘+type,fn);
　　}

七、阻止默認事件的兼容
　　function(evt) {
　　　　var oEvent = evt || event;
　　　　oEvent.preventDefault && oEvent.preventDefault();
　　　　return false;
　　}

八、事件委托兼容
　　srcElement: 獲取到事件真正作用的那個元素 (不兼容Firefox,專門用來做IE瀏覽器的兼容)
　　target: 獲取到事件真正作用的那個元素 （兼容高級瀏覽器）
　　var oLi = oEvent.srcElement || oEvent.target;

　　addEvent(‘oUl‘,‘click‘,function(evt){

　　　　var oEvent=evt||event;

　　　　var oLi=oEvent.srcElement||oEvent.target;

　　})

chrome-Firefox-IE瀏覽器兼容總結