近期開發(fā)寫前端代碼比較多些,就網(wǎng)上搜了些資料來學(xué)習(xí)瀏覽器兼容性這類問題夷野,兼容性這代碼調(diào)起來還是很麻煩的荣倾。先總結(jié)些理論知識。
一舌仍、瀏覽器內(nèi)核介紹
“瀏覽器內(nèi)核”主要指渲染引擎(Rendering Engine), 渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息抡笼。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解析也有所不同,因此同一網(wǎng)頁在不同的內(nèi)核瀏覽器里的渲 染平匈、展示效果也可能不同。主流的四大瀏覽器內(nèi)核:
1增炭、Trident內(nèi)核代表:Internet Explore、搜狗
2隙姿、Gecko內(nèi)核代表:Mozilla梅垄、Firefox
3输玷、WebKit內(nèi)核代表:Safari队丝、Chrome
4欲鹏、Presto內(nèi)核代表:Opera
有些瀏覽器還是雙內(nèi)核比如:360極速、QQ瀏覽器等赔嚎。
WebKit內(nèi)核在手機上 的應(yīng)用也十分廣泛,例如Google的Android平臺瀏覽器尤误、Apple的iPhone瀏覽器、Nokia S60瀏覽器等所使用的瀏覽器內(nèi)核引擎软棺,都是基于WebKit引擎的沉馆。
最后再整體歸納下幾種內(nèi)核的優(yōu)缺點吧:
①、Trident:因為在早期IE占有大量的市場份額斥黑,所以以前有很多網(wǎng)頁是根據(jù)這個Trident的標準來編寫的,但是實際上這個內(nèi)核對真正的網(wǎng)頁標準支持不是很好兽狭,同時存在許多安全Bug。
②箕慧、Gecko:優(yōu)點就是功能強大茴恰、豐富,可以支持很多復(fù)雜網(wǎng)頁效果和瀏覽器擴展接口往枣,缺點是消耗很多的資源粉渠,比如內(nèi)存圾另。
③、Webkit:優(yōu)點就是Webkit擁有清晰的源碼結(jié)構(gòu)去件、極快的渲染速度,缺點是對網(wǎng)頁代碼的兼容性較低尤溜,會使一些編寫不標準的網(wǎng)頁無法正確顯示幼衰。
④、Presto:Presto內(nèi)核被稱為公認的瀏覽網(wǎng)頁速度最快的內(nèi)核渡嚣,同時也是處理JS腳本最兼容的內(nèi)核肥印,能在Windows、Mac及Linux操作系統(tǒng)下完美運行腹鹉。
二敷硅、使用css hack來兼容不同的瀏覽器
CSS Hack大致有3種表現(xiàn)形式(下面的討論已經(jīng)不包含IE6了):
1、HTML頭部引用Hack:這類Hack不僅對CSS生效绞蹦,對寫在判斷語句里面的所有代碼都會生效。
針對所有IE:<!--[if IE]>....<![endif]-->
針對IE9及以下版本:<!--[if lt IE 9]>....<![endif]-->
//html兼容ie的寫法
<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->
//類a某個樣式在ie8上有問題時景殷,就可以寫成
.ie8 .a{}
2澡屡、類內(nèi)屬性前綴法和選擇器前綴法:CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴,以達到預(yù)期的頁面展現(xiàn)效果
三驶鹉、不同瀏覽器內(nèi)核對css3跟html5的支持
下面這篇文章介紹很詳細了。
http://tools.yesky.com/101/11197101_2.shtml
四鞍爱、總結(jié)
瀏覽器兼容性是個任重而道遠的任務(wù),近期都在看別人寫的兼容性好的前端框架碱妆,獲益不少疹尾,看著那些純css實現(xiàn)的動畫效果骤肛,讓人驚呆了,前端也是門很深的課程腋颠。