經(jīng)常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什么,常用hack的技巧 ?

  • png24位的圖片在iE6瀏覽器上出現(xiàn)背景,解決方案是做成PNG8.

  • 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。

  • IE6雙邊距bug:塊屬性標(biāo)簽float后,又有橫行的margin情況下,在ie6顯示margin比設(shè)置的大。

    浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

    這種情況之下IE會(huì)產(chǎn)生20px的距離,解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

    漸進(jìn)識(shí)別的方式,從總體中逐漸排除局部。

    首先,巧妙的使用“\9”這一標(biāo)記,將IE游覽器從所有情況中分離出來。
    接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經(jīng)獨(dú)立識(shí)別。

    css
    .bb{
    background-color:#f1ee18;/所有識(shí)別/
    .background-color:#00deff\9; /IE6、7、8識(shí)別/
    +background-color:#a200ff;/IE6、7識(shí)別/
    _background-color:#1e0bd1;/IE6識(shí)別/
    }

  • IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
    也可以使用getAttribute()獲取自定義屬性;
    Firefox下,只能使用getAttribute()獲取自定義屬性。
    解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

  • IE下,even對(duì)象有x,y屬性,但是沒有pageX,pageY屬性;
    Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性。

  • 解決方法:(條件注釋)缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

  • Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
    可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容