在眾多CSS工程師的日常工作中,IE瀏覽器的兼容性問題是無法避免的。CSS的兼容性對于不同的瀏覽器來說有時候會造成很大的差別,特別是在IE中。但是,我們可以通過一些方法來解決CSS在IE瀏覽器中的兼容性問題,以下是一些經(jīng)典的解決方法:
/*使用hack解決兼容性問題*/ .element{ /*IE6及以下 版本瀏覽器*/ _color:#f00; /*IE6及 IE7 版本瀏覽器*/ *color:#f00; /*IE7及以下 版本瀏覽器*/ *+color:#f00; /*IE8及以下 以及僅僅只有IE8 以及 IE8 能判斷是否是 IE8的瀏覽器*/ html>body .element{ color:#f00; } /*僅 IE瀏覽器生效*/ @media \0screen { .element { color:#f00; } } /*IE 10以上瀏覽器生效*/ @media screen and (min-width:0\0) { .element { color:#f00; } } }
上面的兼容性hack是在實際項目中運用到的實踐,雖然不同的hack方式可能會導(dǎo)致代碼的一些問題,但這些hack可以使您的代碼在不同的IE瀏覽器上達到相同的效果。在實際工作中,我們也可以使用一些優(yōu)秀的樣式框架,比如Bootstrap、 Foundation等,并且這些框架已經(jīng)考慮了跨瀏覽器的兼容性問題,在使用這些框架的時候也可以很好地解決IE兼容性的問題。
除了使用hack和CSS框架,我們還可以通過以下方式來解決CSS在IE瀏覽器中的兼容性問題:
/*增加惡意注釋,解決IE6對繼承問題*/ .element{ color:#f00; /*以下注釋將使IE6有效*/ _color:#0f0; }
惡意注釋(#__)是一種被CSS開發(fā)者使用來觸發(fā)某些版本的IE瀏覽器特殊解析模式的注釋。這種惡意注釋的同時可以增加代碼的易讀性,并且可以節(jié)省一些體積。當(dāng)IE6看到這個注釋時,它會停止像接下來處理樣式表。不過,在另一些版本的瀏覽器中,這個注釋盡管不影響它們的正常工作,但是仍然會被當(dāng)成注釋處理。
由于眾所周知的原因,IE是CSS開發(fā)過程中最令人頭疼的瀏覽器。我們必須采取一些特殊的技巧來兼容IE,使我們的CSS樣式可以在IE上正常運行。往往最好的方法是與項目的其他開發(fā)者分享您的解決方案,并且留意最新的開發(fā)趨勢和新技術(shù)。通過各種資源的學(xué)習(xí)與交流,我們能夠更好地理解如何使用CSS技術(shù)來開發(fā)兼容各種瀏覽器的站點。