常見瀏覽器兼容性問題

先上圖：

能夠看出如今主流瀏覽器明顯就是chrome了，固然還有至關一部分IE用戶，因此瀏覽器兼容性的討論依然沒有過時~

咱們來討論IE7+和現代瀏覽器的兼容性吧，咱們分開兩部分 樣式兼容 和 腳本兼容

一.樣式兼容

1）最常碰見的margin padding

當咱們只寫HTML，不加樣式控制的狀況下，各自瀏覽器的默認margin 和padding差別較大。

最簡單的方法就是用通配符  *{margin:0;padding:0;}

固然也有一些比較好的初始話的樣式定義，我我的就比較喜歡用一下這一套：

html{color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}

2）幾個inline或者inline-block排列有默認空隙

我的建議用float去消除間隙，有人會用負margin解決，可是每一個瀏覽器的默認間距不必定同樣，這會有兼容性問題~

二.腳本兼容

腳本兼容無外乎瀏覽器支不支持哪一個屬性或者，哪一個方法，所以絕大部分的腳本兼容性問題都是用if else來解決~

1.event對象兼容

兼容事件對象  var oEvent=ev||event;

document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    console.log(oEvent);
};