## **瀏覽器兼容**
瀏覽器


瀏覽器大戰(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)想。