瀏覽器兼容性問題

 瀏覽器經常使用的前綴有：

• -moz表明firefox瀏覽器私有屬性
• -ms表明IE瀏覽器私有屬性
• -webkit表明chrome、safari私有屬性
• -o表明opera私有屬性

 

1、html部分

H5新標籤在IE9如下的瀏覽器識別

<!--[if lt IE 9]>

 <script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

 html5shiv.js下載地址

https://github.com/aFarkas/html5shiv/releases

 

2、CSS樣式的兼容性

css的hack問題：主要針對IE的不一樣版本，不一樣的瀏覽器的寫法不一樣  IE的條件註釋hack：  <!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->            <!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->

常見CSS屬性兼容

• inline-block: >=ie8
• min-width/min-height: >=ie7
• :before,:after: >=ie8
• div:hover: >=ie7
• inline-block: >=ie8
• background-size: >=ie9
• 圓角: >= ie9
• 陰影: >= ie9
• 動畫/漸變: >= ie10

list-style-image準肯定位的問題

問題：

       li前設置圖片時，圖片與其後的文字對齊問題

解決：

一、採用背景定位 和 字符縮進的方法

background:url() no-repeat left center;text-index:16px;

二、採用相對定位方法

li 設置list-style:url();

li的子元素position:relative;top:-5px;

  

單選框、複選框與後面的文字對不齊

問題：

     單選框、複選框與後面的文字對不齊。

解決：

.align{font-size:12px;}

.align input{ display:block; float:left;}

.align label{ display:block; float:left;padding-top:3px; *padding-top:5px;}

圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（有人使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此儘可能不要使用）

標籤最低高度設置min-height不兼容

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-h

eight:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。  

li中內容超過長度後以省略號顯示

此技巧適用與IE、Opera、safari、chrom瀏覽器，FF暫不支持。

<style type="text/css">
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
}

爲何沒法定義1px左右高度的容器

IE6下這個問題是由於默認的行高形成的,解決的技巧也有不少：

例如:overflow:hidden　 zoom:0.08 　line-height:1px 

chrome瀏覽器下不支持字體小於12像素

經過-webkit-text-size-adjust: none;來解決

字體大小定義不一樣

問題表現：對字體大小small定義不一樣，Firefox爲13px，而IE爲16px，差異比較大

解決方法：使用指定的字體大小如14px或者使用em

常見的兼容性問題？

不一樣瀏覽器的標籤默認的margin和padding不同。 *{margin:0;padding:0;}

漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「9」這一標記，將IE瀏覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。 {background-color:#f1ee18;/*全部識別*/.background-color:#00deff\9; /*IE六、七、8識別*/+background-color:#a200ff;/*IE六、7識別*/_background-color:#1e0bd1;/*IE6識別*/}

設置較小高度標籤（通常小於10px），在IE6，IE7中高度超出本身設置高度。hack：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

IE下，可使用獲取常規屬性的方法來獲取自定義屬性,也可使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一經過getAttribute()獲取自定義屬性。

超連接訪問事後hover樣式就不出現了，被點擊訪問過的超連接樣式再也不具備hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

 

3、JavaScript的兼容性

事件綁定方法函數不一樣：標準的事件綁定方法函數爲addEventListener，但IE下是attachEvent；

事件的捕獲方式不一致：標準瀏覽器是由外至內，而IE是由內到外，可是最後的結果是將IE的標準定爲標準window.event獲取的；

獲取目標元素的方法不一樣：標準瀏覽器是event.target，而IE下是event.srcElement

ajax的實現方式不一樣：這個我所理解的是獲取XMLHttpRequest的不一樣，IE下是activeXObject 

得到DOM節點的父節點、子節點的方式不一樣： 其餘瀏覽器：parentNode  parentNode.childNodes   IE：parentElement parentElement.children

鼠標座標：e.pageX, e.pageY VS window.event.x, window.event.y

原生ajax中低版本ie不支持xmlhttprequest對象

解決方法是作一個判斷，若是有xmlhttprequest方法，則調用，若沒有，則改用ie瀏覽器的ActiveXobject方法：

 if(window.XMLHttpRequest){ var oAjax=window.XMLHttpRequest }else{ var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); }

低版本瀏覽器不支持getElementByClassName

解決方法是重寫一個getByClass()函數：

function getByClass(obj,sClass){ var aResult = []; if(obj.getElementsByClassName){ aResult = obj.getElementsByClassName(sClass); }else{ var aEle = obj.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){ var aClass = aEle[i].className.split(' '); if(findInArr(aClass,sClass)){ //調用自定義的findArr方法 aResult.push(aEle[i]); } } } return aResult; } function findInArr(arr,sClass){ for(var i=0;i<arr.length;i++){ if(arr[i]==sClass){ return true; } } return false; }