瀏覽器的兼容性

luck 發(fā)布于2019-08-01 15:49 / 513人閱讀

摘要：瀏覽器的兼容性兼容有很多新增的標(biāo)簽，在不支持的瀏覽器中不能正常顯示。事件處理中屬性，標(biāo)準(zhǔn)瀏覽器是作為參數(shù)帶入，而是方式獲得。

瀏覽器的兼容性 html5兼容

html5有很多新增的標(biāo)簽，在不支持html5的瀏覽器中不能正常顯示。
解決方法：
使用html5的靜態(tài)資源；
加入腳本代碼，document.createElement創(chuàng)建新的標(biāo)簽，并display:block;設(shè)置為塊類(lèi)型

css兼容

1、png24位的圖片在ie6瀏覽器上出現(xiàn)背景，解決方案是做成png8

2、瀏覽器默認(rèn)的margin和padding不同，解決方案是 * {margin:0;padding:0;}

3、IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大
    
    浮動(dòng)ie產(chǎn)生的雙倍距離
    #box {
        float:left;
        width:10px;
        margin:0 0 0 10px;
    }
    這種情況下ie會(huì)產(chǎn)生20px的距離
    解決方案是在float的標(biāo)簽樣式中加入_display:inline;(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
    
4、IE兼容
    漸進(jìn)識(shí)別的方式
    
    首先，"9"將IE9瀏覽器從所有情況下分離出來(lái)
    接著，"+"將IE8和IE7、IE6分離開(kāi)來(lái)
    .box{
        background-color:#f1ee18;  //所有都可識(shí)別
        background-color:#00deff9;   //IE6、7、8
        +background-color:#a200ff;   //IE6、7
        _background-color:#1e0bd1;    //IE6
    }

5、IE條件注釋


6、IE6無(wú)法定義1px左右高度的容器，是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,
例如: overflow:hidden zoom:0.08 line-height:1px 

7、使用margin：0 auto；方法使容器居中依然在IE6中行不通，我們要對(duì)其父容器使用text-align:center;

8、超鏈接訪問(wèn)順序L-V-H-A a:lind,a:visited,a:hover.a:active

9、Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示
解決方案：-webkit-text-size-adjust:none;

10、在使用絕對(duì)定位/相對(duì)定位時(shí)，設(shè)置z-index在ie中可能會(huì)失效
是因?yàn)槠湓匾蕾囉谄涓冈氐膠-index，而父元素默認(rèn)為0，所以子元素z-index高，而父元素低，依然不會(huì)改變其顯示順序；

javascript兼容

1、在標(biāo)準(zhǔn)的事件綁定中綁定事件的方法函數(shù)為 addEventListener,而IE使用的是attachEvent

2、標(biāo)準(zhǔn)瀏覽器采用事件捕獲的方式對(duì)應(yīng)IE的事件冒泡機(jī)制（即標(biāo)準(zhǔn)由最外元素至最內(nèi)元素或者IE由最內(nèi)元素到最外元素）最后標(biāo)準(zhǔn)方亦覺(jué)得IE這方面的比較合理，所以便將事件冒泡納入了標(biāo)準(zhǔn)，這也是addEventListener第三個(gè)參數(shù)的由來(lái)，而且事件冒泡作為了默認(rèn)值。

3、事件處理中event屬性，標(biāo)準(zhǔn)瀏覽器是作為參數(shù)帶入，而ie是window.event方式獲得。

4、獲得目標(biāo)元素ie為e.srcElement 標(biāo)準(zhǔn)瀏覽器為e.target

5、IE下，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；
Firfox只能使用getAttribute()獲取自定義屬性；
解決方法：統(tǒng)一使用getAttribute()

6、IE下，event對(duì)象有x,y屬性，但是沒(méi)有pageX,pageY屬性；
   Firefox，event對(duì)象有pageX,pageY屬性，但是沒(méi)有x,y屬性。
   解決方法：條件注釋