做前端钻蔑，總會涉及到瀏覽器兼容的問題倔约，之所以存在瀏覽器兼容的問題秃殉，是因?yàn)楦鱾€瀏覽器的內(nèi)核不同，相對應(yīng)的同一套代碼浸剩，不同的瀏覽器解析后钾军，所呈現(xiàn)的頁面效果也會存在一定的差異。
一 瀏覽器內(nèi)核差異
我們先來了解一下各個瀏覽器的內(nèi)核（渲染引擎）：
Trident(IE內(nèi)核):
IE6绢要、IE7吏恭、IE8（Trident 4.0）、IE9（Trident 5.0）重罪、IE10（Trident 6.0）樱哼、360安全瀏覽器（1.0-5.0為Trident，6.0為Trident+Webkit剿配，7.0為Trident+Blink）獵豹極輕瀏覽器搅幅，360極速瀏覽器（7.5之前為Trident+Webkit，7.5為Trident+Blink）獵豹安全瀏覽器（1.0-4.2版本為Trident+Webkit呼胚，4.3及以后版本為Trident+Blink）獵豹極輕瀏覽器茄唐，傲游瀏覽器（傲游1.x、2.x為IE內(nèi)核蝇更，3.x為IE與Webkit雙核）沪编、百度瀏覽器（早期版本）、世界之窗瀏覽器[2]（最初為IE內(nèi)核簿寂，2013年采用Chrome+IE內(nèi)核）漾抬、2345瀏覽器、騰訊TT常遂、淘寶瀏覽器纳令、采編讀瀏覽器、搜狗高速瀏覽器（1.x為Trident，2.0及以后版本為Trident+Webkit）平绩、阿云瀏覽器（早期版本）圈匆、瑞星安全瀏覽器、Slim Browser捏雌、 GreenBrowser跃赚、愛帆瀏覽器（12 之前版本）、115瀏覽器性湿、155瀏覽器纬傲、閃游瀏覽器、N氧化碳瀏覽器肤频、糖果瀏覽器叹括、彩虹瀏覽器、瑞影瀏覽器宵荒、勇者無疆瀏覽器汁雷、114瀏覽器、螞蟻瀏覽器报咳、飛騰瀏覽器侠讯、速達(dá)瀏覽器、佐羅瀏覽器暑刃、海豚瀏覽器（iPhone/iPad/Android）厢漩、UC瀏覽器（Blink內(nèi)核+Trident內(nèi)核）等。
Gecko(Firefox內(nèi)核)：
Mozilla Firefox稍走、Mozilla SeaMonkey袁翁、waterfox（Firefox的64位開源版）柴底、Iceweasel婿脸、Epiphany（早期版本）、Flock（早期版本）柄驻、K-Meleon狐树。
Presto(Opera前內(nèi)核) (已廢棄)：
Opera12.17及更早版本曾經(jīng)采用的內(nèi)核，現(xiàn)已停止開發(fā)并廢棄鸿脓。
Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源)：
傲游瀏覽器3抑钟、[1]Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機(jī)瀏覽器野哭、Android 默認(rèn)瀏覽器在塔。
Blink：
這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，并且在Chrome（28及往后版本）拨黔、Opera（15及往后版本）和Yandex瀏覽器中使用蛔溃。
瀏覽器內(nèi)核的區(qū)別，我們只做了解即可，感興趣的同學(xué)贺待，可以自己去搜搜啊~
二 兼容問題處理細(xì)則
1徽曲、瀏覽器默認(rèn)會有一些自己獨(dú)有的屬性，像內(nèi)外邊距啦麸塞，圖片邊框啊秃臣、input自帶的樣式啊等等，當(dāng)我們用到這些標(biāo)簽及樣式時哪工，就需要手動的清楚瀏覽器默認(rèn)樣式奥此，比如清除補(bǔ)丁和邊距：*{margin:0;padding:0;}，像這樣使用通配符強(qiáng)制將補(bǔ)丁和邊距置為零雁比，簡單粗暴得院，但是這樣處理比較消耗性能，我一般傾向于使用一些CSS樣式重置庫章贞，常見的有以下幾種祥绞，大家可以根據(jù)實(shí)際需求來選擇：
Neat.css：解決Bug，特別是低級瀏覽器的常見Bug鸭限；統(tǒng)一效果蜕径，但不盲目追求重置為0；向后兼容败京；考慮響應(yīng) 式兜喻；考慮移動設(shè)備。
http://thx.github.io/cube/doc/neat
Reset.css：對瀏覽器樣式的重置（殺傷力偏大）
http://meyerweb.com/eric/tools/css/reset/
Normalize.css：修復(fù)瀏覽器樣式
https://yuilibrary.com/yui/docs/cssnormalize/
除了這些赡麦，大家還可以借鑒百度朴皆、淘寶的樣式重置表。
2泛粹、塊級元素浮動后遂铡，又使用margin來控制相鄰塊級元素的間距的情況下，在IE6下晶姊，margin值要比我們設(shè)置的值大扒接，這樣，后面浮動的元素就會被擠到下面去们衙，解決方案是：將浮動的塊級元素的display屬性值設(shè)為inline-block钾怔。
3、設(shè)置標(biāo)簽的高度小于10px的時候蒙挑，在IE6宗侦，IE7，遨游中標(biāo)簽的高度會超出自己設(shè)置高度忆蚀。解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度矾利。
4懊悯、行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局梦皮，又有橫行的margin的情況炭分，ie6間距bug。解決方案：在display:block;后面加入display:inline;display:table;剑肯。
5捧毛、幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距让网。解決方案：使用float屬性為img布局呀忧。
6、min-height設(shè)置標(biāo)簽最小高度的時候不兼容溃睹。解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px而账，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
7、CSS Hack技巧
條件注釋法：
<!--[if !IE]><!-->除IE外都可識別<!--<![endif]--><!--[if IE]> 所有的IE可識別 <![endif]--><!--[if IE 6]> 僅IE6可識別 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]--><!--[if IE 7]> 僅IE7可識別 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]--><!--[if IE 8]> 僅IE8可識別 <![endif]--><!--[if IE 9]> 僅IE9可識別 <![endif]-->
類內(nèi)屬性前綴法+選擇器前綴法：
在標(biāo)準(zhǔn)模式中：
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效因篇，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效泞辐，是IE9/10的hack
*html前綴只對IE6生效
+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
代碼示例：
.csshack {? ? width:100px;? ? height:100px;? ? background-color: green;/* 全部識別 */.background-color:#ccc\9;/*IE6、7竞滓、8識別*/+background-color:#fff;/*IE6咐吼、7識別*/_background-color:#1e0bd1;/*IE6識別*/}.csshack, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 識別 */@-moz-document url-prefix(){.csshack{background-color:#00ff00;}}/* 僅firefox 識別 */* +html .csshack{background-color:#a200ff;}/* 僅IE7 識別 */@media screenand(-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}}{}/*safari(Chrome) 有效 */@media alland(min-width:0px){? ? .csshack{? ? ? ? background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/background-color:#4cac70\0;/* 僅 Opera 有效 */}? ? }
8、!important
在ie6下商佑，同一個大括號里對同一個樣式屬性定義锯茄，其中一個加important 則important標(biāo)記是被忽略的，例：{background:red!important; background:green;} ie6下解釋為背景色green茶没，其它瀏覽器解釋為背景色red肌幽；如果這同一個樣式在不同大括號里定義，其中一個加important 則important發(fā)揮正常作用抓半，例：div{background:red!important} div{background:green}喂急，這時所有瀏覽器統(tǒng)一解釋為背景色red。
9琅关、點(diǎn)擊超鏈接后煮岁，hover、active樣式不生效涣易。解決方案，css屬性排列為L-V-H-A冶伞。
10新症、給塊級元素設(shè)置高度高度的時候，最好也同時設(shè)置上line-height屬性值响禽。
11徒爹、去除超鏈接虛線邊框的問題荚醒。當(dāng)點(diǎn)擊超鏈接時，ff隆嗅、ie6界阁、ie7、ie8會出現(xiàn)虛線邊框胖喳。
解決方案：ie6/7中 設(shè)置為a {blr:expression_r(this.onFocus=this.blur()) }
ie8 和 ff 都不支持expression 在ie8 泡躯、ff中設(shè)置為? :focus { outline: none; }
12、css濾鏡的問題：ff丽焊、safari较剃、chrome、opera使用opacity屬性技健，ie使用設(shè)置filter:alpha(opacity=50)時写穴，ie6/7失效，還要設(shè)置zoom:1width:100%雌贱。
13啊送、IE8不兼容Bootstrap框架的解決方案。
引入respond.min.js庫欣孤，兼容響應(yīng)式布局删掀。不過需要注意的是，這個庫不能放在本地路徑下（Fill://）导街，要用靜態(tài)資源鏈接或者放在服務(wù)器上才能生效披泪。
14、不兼容H5標(biāo)簽的解決方法：引入html5shiv.min.js文件搬瑰。
15款票、不兼容rem單位的解決方法：引入html5shiv.min.js文件。引入rem.min.js文件泽论，不過這個文件的引入位置要放在頁面最下方艾少。
16、IE8下翼悴，父級div或者兄弟div有浮動或定位屬性的時候缚够，div模塊設(shè)置背景顏色會失效，或者div本身有浮動屬性鹦赎，設(shè)置背景色也可能會失效谍椅，此時注意布局的方法，我遇到過的是第一種情況古话，我的解決方法時給父級div設(shè)置相對定位雏吭，相鄰div不設(shè)置定位或浮動，本身使用絕對定位陪踩，到想要去的位置杖们，可以讓背景顏色生效悉抵。
作者：心花宇軒
鏈接：http://www.reibang.com/p/85f087d9b758
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處摘完。
