## **瀏覽器兼容**

　　瀏覽器

　　

　　

　　瀏覽器大戰(zhàn)

　　

　　第一次瀏覽器大戰(zhàn)發(fā)生在上個(gè)世紀(jì)90年代，微軟發(fā)布了它的IE瀏覽器，和網(wǎng)景公司的Netscape Navigator瀏覽器大打出手。

　　第二次瀏覽器大戰(zhàn)發(fā)生在20世紀(jì)。

　　戰(zhàn)爭(zhēng)產(chǎn)物：Internet Explorer 9

　　13年市場(chǎng)比重

　　

　　14年市場(chǎng)比重

　　

　　15年市場(chǎng)比重

　　

　　17年市場(chǎng)比重

　　

　　19年市場(chǎng)比重

　　

　　## **瀏覽器內(nèi)核(現(xiàn)代4大內(nèi)核)**

　　**Trident** **代表作：IE**

　　元老級(jí)內(nèi)核之一，由微軟開(kāi)發(fā)，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優(yōu)勢(shì)，Trident市場(chǎng)占有率一直很高。然而壟斷并非，沒(méi)有競(jìng)爭(zhēng)就沒(méi)有進(jìn)步，長(zhǎng)期以往，Trident內(nèi)核一度停滯不前，更新緩慢，甚至一度與W3C標(biāo)準(zhǔn)脫節(jié)。2011年，從ie 9開(kāi)始，Trident開(kāi)始支持HTML5和CSS 3，因此我們也經(jīng)常會(huì)看到有些網(wǎng)站在瀏覽時(shí)會(huì)提示用戶(在Internet Explorer 9.0+以上瀏覽效果最佳)。前端程序員做瀏覽器兼容一般也不再會(huì)考慮ie 8之前的瀏覽器了。

　　**Gecko** **代表作：Mozilla**

　　元老級(jí)內(nèi)核之一，由Netscape公司Mozilla組織開(kāi)發(fā)。1998年，Netscape在于IE瀏覽器競(jìng)爭(zhēng)失利之后，成立了非正式組織Mozilla，由其開(kāi)發(fā)新一代內(nèi)核，后命名為“Gecko”。FireFox也是這班人開(kāi)發(fā)出來(lái)了，因此這也就是Mozilla一直使用的內(nèi)核。

　　Gecko的特點(diǎn)是代碼完全公開(kāi)，因此其開(kāi)發(fā)程度很高，全世界的程序員都可以為其編寫(xiě)代碼，增加功能。

　　**WebKit** **:** **蘋果** **&** **谷歌舊版本**

　　這是蘋果公司開(kāi)發(fā)的內(nèi)核，也是其旗下產(chǎn)品Ssfari瀏覽器使用的內(nèi)核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來(lái)，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)開(kāi)發(fā)。Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內(nèi)核(在腳本理解方面，Chorome使用自己研發(fā)的V8引擎)。

　　**Blink** **:** **代表作：谷歌** **&** **歐鵬**

　　這是由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎，Google計(jì)算將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開(kāi)源引擎Webkit中WebCore組件的一個(gè)分支，并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex瀏覽器中使用

　　Presto ( Opera前內(nèi)核 已經(jīng)廢棄 )

　　**為什么會(huì)出現(xiàn)瀏覽器兼容問(wèn)題?**

　　由于各大主流瀏覽器由不同的廠家開(kāi)發(fā)，所用的核心架構(gòu)和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯(cuò)誤)提供了溫床。再加上各大廠商出于自身利益考慮而設(shè)置的種種技術(shù)壁壘，都讓CSS應(yīng)用起來(lái)比想象得要麻煩。瀏覽器的兼容問(wèn)題是我們必須去克服的。

　　CSS Bug、CSS Hack和Filter

　　CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說(shuō)CSS樣式在瀏覽器中不能正確顯示的問(wèn)題稱為CSS bug.

　　CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€(gè)人對(duì)CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來(lái)描述這種行為。

　　Filter:表示過(guò)濾器的意思，它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，F(xiàn)ilter是一種用來(lái)過(guò)濾不同瀏覽器的Hack類型。

　　## **常見(jiàn)的BUG**

　　**IE低版本常見(jiàn)CSS解析Bug及hack**

　　1)、圖片有邊框BUG

　　當(dāng)圖片加在IE上會(huì)出現(xiàn)邊框

　　Hack:給圖片加border:0;或者border:0 none;

　　2)、圖片間隙

　　div中的圖片間隙BUG

　　描述：在div中插入圖片時(shí)，圖片會(huì)將div下方撐大大約三像素。

　　hack1:將與寫(xiě)在一行上;

　　hack2:將轉(zhuǎn)為塊狀元素，給添加聲明：display:block;

　　3)、雙倍浮向(雙倍邊距)(只有IE6出現(xiàn))

　　描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊邊界(margin)加倍顯示。

　　hack:給浮動(dòng)元素添加聲明：display:inline;

　　4)、默認(rèn)高度(IE6、IE7)

　　描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度(在16px左右;)

　　hack1:給元素添加聲明：font-size:0;

　　hack2：給元素添加聲明：overflow:hidden;

　　**非IE** **BUG**

　　5)、表單元素對(duì)齊不一致

　　描述：表單元素行高對(duì)齊方式不一致

　　hack:給表單元素添加聲明：float:left;

　　6)、按鈕元素默認(rèn)大小不一

　　描述：各瀏覽器中按鈕元素大小不一致

　　hack1：統(tǒng)一大小/(用a標(biāo)記模擬)

　　hack2:input外邊套一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽里寫(xiě)按鈕的樣式，把input的邊框去掉。

　　hack3:如果這個(gè)按鈕是一個(gè)圖片，直接把圖片作為按鈕的背景圖即可。

　　7)、鼠標(biāo)指針bug

　　描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識(shí)別，其它瀏覽器不識(shí)別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識(shí)別該聲明。

　　hack: 如統(tǒng)一某元素鼠標(biāo)指針形狀為手型， 應(yīng)添加聲明：cursor:pointer cursor: ;

　　> auto默認(rèn)

　　> crosshair加號(hào)

　　> text文本

　　> wait等待

　　> help幫助

　　> progress過(guò)程

　　> inherit繼承

　　> move移動(dòng)

　　> ne-resize向上或向右移動(dòng)

　　> pointer手形

　　8)、透明屬性

　　兼容其他瀏覽器寫(xiě)法：opacity:value;(value的取值范圍0-1;

　　例：opacity:0.5;)

　　IE瀏覽器寫(xiě)法：filter:alpha(opacity=value);取值范圍 1-100(整數(shù))

　　**過(guò)濾器**

　　1.下劃線屬性過(guò)濾器 當(dāng)在一個(gè)屬性前面增加了一個(gè)下劃線后，由于符合標(biāo)準(zhǔn)的瀏覽器不能識(shí)別帶有下劃線的屬性而忽略了這個(gè)聲明，但是在IE6及更低版本瀏覽器中會(huì)繼續(xù)解析這個(gè)規(guī)則。

　　語(yǔ)法：選擇符{_屬性：屬性值;}

　　2.!important關(guān)鍵字過(guò)濾器

　　它表示所附加的聲明具有最高優(yōu)先級(jí)的意思。但由于IE6及更低版本不能識(shí)別它， 我們可以利用IE6的這個(gè)Bug作為過(guò)濾器來(lái)兼容IE6和其它標(biāo)準(zhǔn)瀏覽器。

　　語(yǔ)法：選擇符{屬性：屬性值!important;}

　　3.*屬性過(guò)濾器

　　當(dāng)在一個(gè)屬性前面增加了*后，該屬性只能被IE7瀏覽器識(shí)別，其它瀏覽器混略該屬 性的作用。

　　語(yǔ)法：選擇符{*屬性：屬性值;}

　　4.\9 ：IE版本識(shí)別;其它瀏覽器都不識(shí) 語(yǔ)法：選擇符{屬性：屬性值\9;}

　　5.\0 : IE8 及以上版本識(shí)別;其它瀏覽器都不識(shí)別

　　**-** **End** **-**

　　更多關(guān)于“html5培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。