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

前言：

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

一、css兼容

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

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

碰到頻率: 100%

解決方案：

1. CSS里 *{margin:0;padding:0;} 但是性能不好
2. 一般我們會引入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%

解決方案：

1. 給超出高度的標簽設定overflow:hidden;
2. 或者設定行高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){
         //兼容IE
 　　　　　　obj.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>