## **瀏覽器兼容**
瀏覽器
瀏覽器大戰(zhàn)
第一次瀏覽器大戰(zhàn)發(fā)生在上個(gè)世紀(jì)90年代，微軟發(fā)布了它的IE瀏覽器，和網(wǎng)景公司的Netscape Navigator瀏覽器大打出手。
第二次瀏覽器大戰(zhàn)發(fā)生在20世紀(jì)。
戰(zhàn)爭產(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)核之一，由微軟開發(fā)，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優(yōu)勢(shì)，Trident市場(chǎng)占有率一直很高。然而壟斷并非，沒有競(jìng)爭就沒有進(jìn)步，長期以往，Trident內(nèi)核一度停滯不前，更新緩慢，甚至一度與W3C標(biāo)準(zhǔn)脫節(jié)。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經(jīng)常會(huì)看到有些網(wǎng)站在瀏覽時(shí)會(huì)提示用戶(在Internet Explorer 9.0+以上瀏覽效果最佳)。前端程序員做瀏覽器兼容一般也不再會(huì)考慮ie 8之前的瀏覽器了。
**Gecko** **代表作：Mozilla**
元老級(jí)內(nèi)核之一，由Netscape公司Mozilla組織開發(fā)。1998年，Netscape在于IE瀏覽器競(jìng)爭失利之后，成立了非正式組織Mozilla，由其開發(fā)新一代內(nèi)核，后命名為“Gecko”。FireFox也是這班人開發(fā)出來了，因此這也就是Mozilla一直使用的內(nèi)核。
Gecko的特點(diǎn)是代碼完全公開，因此其開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
**WebKit** **:** **蘋果** **&** **谷歌舊版本**
這是蘋果公司開發(fā)的內(nèi)核，也是其旗下產(chǎn)品Ssfari瀏覽器使用的內(nèi)核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)開發(fā)。Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內(nèi)核(在腳本理解方面，Chorome使用自己研發(fā)的V8引擎)。
**Blink** **:** **代表作：谷歌** **&** **歐鵬**
這是由Google和Opera Software開發(fā)的瀏覽器排版引擎，Google計(jì)算將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個(gè)分支，并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex瀏覽器中使用
Presto ( Opera前內(nèi)核 已經(jīng)廢棄 )
**為什么會(huì)出現(xiàn)瀏覽器兼容問題?**
由于各大主流瀏覽器由不同的廠家開發(fā)，所用的核心架構(gòu)和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯(cuò)誤)提供了溫床。再加上各大廠商出于自身利益考慮而設(shè)置的種種技術(shù)壁壘，都讓CSS應(yīng)用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。
CSS Bug、CSS Hack和Filter
CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€(gè)人對(duì)CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來描述這種行為。
Filter:表示過濾器的意思，它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，F(xiàn)ilter是一種用來過濾不同瀏覽器的Hack類型。
## **常見的BUG**
**IE低版本常見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:將與寫在一行上;
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)簽里寫按鈕的樣式，把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過程
> inherit繼承
> move移動(dòng)
> ne-resize向上或向右移動(dòng)
> pointer手形
8)、透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1;
例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數(shù))
**過濾器**
1.下劃線屬性過濾器 當(dāng)在一個(gè)屬性前面增加了一個(gè)下劃線后，由于符合標(biāo)準(zhǔn)的瀏覽器不能識(shí)別帶有下劃線的屬性而忽略了這個(gè)聲明，但是在IE6及更低版本瀏覽器中會(huì)繼續(xù)解析這個(gè)規(guī)則。
語法：選擇符{_屬性：屬性值;}
2.!important關(guān)鍵字過濾器
它表示所附加的聲明具有最高優(yōu)先級(jí)的意思。但由于IE6及更低版本不能識(shí)別它， 我們可以利用IE6的這個(gè)Bug作為過濾器來兼容IE6和其它標(biāo)準(zhǔn)瀏覽器。
語法：選擇符{屬性：屬性值!important;}
3.*屬性過濾器
當(dāng)在一個(gè)屬性前面增加了*后，該屬性只能被IE7瀏覽器識(shí)別，其它瀏覽器混略該屬 性的作用。
語法：選擇符{*屬性：屬性值;}
4.\9 ：IE版本識(shí)別;其它瀏覽器都不識(shí) 語法：選擇符{屬性：屬性值\9;}
5.\0 : IE8 及以上版本識(shí)別;其它瀏覽器都不識(shí)別
**-** **End** **-**
更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)