前端常見瀏覽器兼容性問題解決方案

前言：

不同瀏覽器的內核不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。
瀏覽器內核主要分為兩種，一是渲染引擎，另一個是js 引擎
所以瀏覽器兼容性問題一般指：css兼容、js兼容

瀏覽器內核（渲染引擎）

Chrome谷歌	之前Webkit，已改Blink內核
FireFox火狐	Gecko
Safari蘋果	Webkit
IE	Trident
Opera歐朋	現已改用Google Chrome的Blink內核

一、css兼容

---

1. 不同瀏覽器的標簽默認的margin和padding不同

問題癥狀： 隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率: 100%

解決方案：

CSS里 *{margin:0;padding:0;} 但是性能不好

一般我們會引入reset.css樣式重置；

備注： 這個是最常見的也是最易解決的一個瀏覽器兼容性問題，所有的CSS文件開頭都會用樣式重置各個標簽的內外補丁是0。

---

2. css3新屬性，加瀏覽器前綴兼容早期瀏覽器

-moz- /* 火狐瀏覽器 /
-webkit- / Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 /
-o- / Opera瀏覽器(早期) /
-ms- / IE */

哪些css3屬性需要加：

定義關鍵幀動畫 @keyframes css3中的變形（transform）、過渡(transtion)、動畫(animation) border-radius 圓角 box-shadow 盒子陰影 flex 彈性布局 ....

使用：

.myClass {-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;-ms-animation-name: fadeIn;animation-name: fadeIn; /* 不帶前綴的放到最后 */ } /* 復雜屬性 keyframes */ @-webkit-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; } } /* 不帶前綴的放到最后 */ @keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; } }

---

3. 塊屬性標簽float后，又有橫行的margin情況下，IE 瀏覽器margin加倍的問題

問題癥狀: 常見癥狀是IE6中后面的一塊被頂到下一行

解決方案： 設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;

<divid=”imfloat”> 相應的css為 # imfloat{ float:left; margin:5px;//IE下理解為10px display:inline;//IE下再理解為5px}

備注： 我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。

---

4. 設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度
問題癥狀： 設置div高度小于10px，IE6、7和遨游里div的高度，超出自己設置的10px.

碰到頻率： 60%

解決方案：

給超出高度的標簽設置overflow:hidden;

或者設置行高line-height 小于你設置的高度。

備注： 這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

---

5. 行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀： IE6里的間距比超過設置的間距

碰到幾率： 20%

解決方案： 在display:block;后面加入display:inline;display:table;

備注： 行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input/img標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe

---

6. IE瀏覽器div最小寬度和高度的問題

問題癥狀： IE瀏覽器div最小寬度和高度不生效

IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。

比如要設置背景圖片，這個最小寬度是比較重要的。要解決這個問題，可以這樣：

#box{width: 80px;height: 35px;} html>body #box{width: auto;height: auto; min-width: 80px; min-height: 35px;}

---

7. 超鏈接訪問過后hover樣式就不出現的問題

被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A

Code:

<style type="text/css">a:link {} a:visited {} a:hover {} a:active {}</style>

---

8. 圖片默認有間距

問題癥狀： 幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，通配符清除間距也不起作用。

碰到幾率： 20%

解決方案： 使用float屬性為img布局(所有圖片左浮)

備注： 因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。

---

9. css hack解決瀏覽器兼容性

不同瀏覽器，識別不同的樣式，csshack本身就是處理瀏覽器兼容的。
下面是css hack寫法：

background-color:yellow0; 0 是留給ie8的 +background-color:pink; + ie7定了； _background-color:orange; _專門留給神奇的ie6；

---

二、js兼容

1. 事件綁定

IE: dom.attachEvent();
標準瀏覽器： dom.addEventListener(‘click',function(event){},false);

標準瀏覽器采用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最后標準方亦覺得IE這方面的比較合理，所以便將事件冒泡納入了標準，這也是addEventListener第三個參數的由來，而且事件冒泡作為了默認值第三值默認false，表示事件冒泡方式。

如果瀏覽器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。

以下實例演示了跨瀏覽器的解決方法：

var x = document.getElementById("myBtn"); if (x.addEventListener) { //所有主流瀏覽器，ie9+x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早 IE 版本x.attachEvent("onclick", myFunction); }

---

2. event事件對象問題

document.onclick=function(ev){//谷歌火狐的寫法，IE9以上支持，往下不支持；var e=ev;console.log(e);}document.onclick=function(){//谷歌和IE支持，火狐不支持；var e=event;console.log(e);}document.onclick=function(ev){//兼容寫法；var e=ev||window.event;var mouseX=e.clientX;//鼠標X軸的坐標var mouseY=e.clientY;//鼠標Y軸的坐標}

---

2. event.srcElement(事件源對象)問題
IE： event對象有srcElement屬性，但是沒有target屬性；
Firefox: event對象有target屬性，但是沒有srcElement屬性。
解決方法：

srcObj = event.srcElement?event.srcElement:event.target;

---

3. 獲取元素的非行間樣式值：

IE: dom.currentStyle[‘width’] 獲取元素高度
標準瀏覽器： window.getComputedStyle(obj, null)['width'];

跨瀏覽器兼容解決方法：

// 獲取元素屬性值的兼容寫法function getStyle(obj,attr){if(obj.currentStyle){//兼容IEobj.currentStyle[attr];return obj.currentStyle[attr];}else{//非IE，return window.getComputedStyle(obj, null)[attr]; }}

---

4. 阻止事件冒泡傳播：

//js阻止事件傳播，這里使用click事件為例document.onclick=function(e){var e=e||window.event;if (e.stopPropagation) {e.stopPropagation();//W3C標準}else{e.cancelBubble=true;//IE....}}

5. 阻止事件默認行為：

//js阻止默認事件 一般阻止a鏈接href，form表單submit提交document.onclick=function(e){var e=e||window.event;if (e.preventDefault) {e.preventDefault();//W3C標準}else{e.returnValue='false';//IE..}}

---

6. ajax兼容問題

IE： ActiveXObject
其他： xmlHttpReuest

在IE6以前不是用XMLHttpRequest創建的，所以我們要兼容ie6以前的瀏覽器要判斷他有沒有XMLHttpRequest()

跨瀏覽器兼容解決方法：

<script>window.onload = function(){var oBtn = document.getElementById('btn');oBtn.onclick = function(){//1.創建ajax對象//只支持非IE6瀏覽器var oAjax = null;if(window.XMLHttpRequest){oAjax = new XMLHttpRequest(); //alert(new XMLHttpRequest());}else{//只支持IE6瀏覽器oAjax = new ActiveXObject("Microsoft.XMLHTTP"); }//2.連接服務器,這里加個時間參數,每次訪問地址都不一樣,瀏覽器就不用瀏覽器里的緩沖了,但// 但服務器那端是不解析這個時間的oAjax.open("get","a.txt?t=" + new Date().getTime(),true);//3.發送oAjax.send(null); //4.接受信息oAjax.onreadystatechange = function(){//瀏覽器與服務器之間的交互,進行到哪一步了,當等于4的時候,代表讀取完成了if(oAjax.readyState==4){//狀態碼,只有等于200,代表接受完成,并且成功了if(oAjax.status==200){alert("成功" + oAjax.responseText); }else{alert("失敗"); } } };};}; </script>

看更多面試題，請點擊