做前端剃法，總會涉及到瀏覽器兼容的問題，之所以存在瀏覽器兼容的問題勾栗，是因?yàn)楦鱾€(gè)瀏覽器的內(nèi)核不同惨篱，相對應(yīng)的同一套代碼，不同的瀏覽器解析后围俘，所呈現(xiàn)的頁面效果也會存在一定的差異妒蛇。
一 瀏覽器內(nèi)核差異
我們先來了解一下各個(gè)瀏覽器的內(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組件的一個(gè)分支，并且在Chrome（28及往后版本）王污、Opera（15及往后版本）和Yandex瀏覽器中使用罢吃。
瀏覽器內(nèi)核的區(qū)別楚午，我們只做了解即可昭齐，感興趣的同學(xué)，可以自己去搜搜啊~
二 兼容問題處理細(xì)則
1矾柜、瀏覽器默認(rèn)會有一些自己獨(dú)有的屬性阱驾，像內(nèi)外邊距啦，圖片邊框啊怪蔑、input自帶的樣式啊等等里覆，當(dāng)我們用到這些標(biāo)簽及樣式時(shí)，就需要手動的清楚瀏覽器默認(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的時(shí)候退子，在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狠裹、幾個(gè)img標(biāo)簽放在一起的時(shí)候虽界，有些瀏覽器會有默認(rèn)的間距。解決方案：使用float屬性為img布局涛菠。
6莉御、min-height設(shè)置標(biāo)簽最小高度的時(shí)候不兼容。解決方案：如果我們要設(shè)置一個(gè)標(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 screen and (-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
@media all and (min-width: 0px){
.csshack{
background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/
background-color:#4cac70\0;/* 僅 Opera 有效 */
}
}
8死姚、!important
在ie6下，同一個(gè)大括號里對同一個(gè)樣式屬性定義勤篮，其中一個(gè)加important 則important標(biāo)記是被忽略的都毒，例：{background:red!important; background:green;} ie6下解釋為背景色green，其它瀏覽器解釋為背景色red碰缔；如果這同一個(gè)樣式在不同大括號里定義账劲，其中一個(gè)加important 則important發(fā)揮正常作用，例：div{background:red!important} div{background:green}，這時(shí)所有瀏覽器統(tǒng)一解釋為背景色red瀑焦。
9腌且、點(diǎn)擊超鏈接后，hover榛瓮、active樣式不生效铺董。解決方案，css屬性排列為L-V-H-A禀晓。
10精续、給塊級元素設(shè)置高度高度的時(shí)候，最好也同時(shí)設(shè)置上line-height屬性值粹懒。
11重付、去除超鏈接虛線邊框的問題。當(dāng)點(diǎn)擊超鏈接時(shí)凫乖，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)時(shí)计福，ie6/7失效跌捆，還要設(shè)置zoom:1width:100%。
13象颖、IE8不兼容Bootstrap框架的解決方案佩厚。
引入respond.min.js庫，兼容響應(yīng)式布局说订。不過需要注意的是抄瓦，這個(gè)庫不能放在本地路徑下（Fill://），要用靜態(tài)資源鏈接或者放在服務(wù)器上才能生效陶冷。
14钙姊、不兼容H5標(biāo)簽的解決方法：引入html5shiv.min.js文件。
15埂伦、不兼容rem單位的解決方法：引入html5shiv.min.js文件煞额。引入rem.min.js文件，不過這個(gè)文件的引入位置要放在頁面最下方。
16膊毁、IE8下胀莹，父級div或者兄弟div有浮動或定位屬性的時(shí)候，div模塊設(shè)置背景顏色會失效婚温，或者div本身有浮動屬性嗜逻，設(shè)置背景色也可能會失效，此時(shí)注意布局的方法缭召，我遇到過的是第一種情況栈顷，我的解決方法時(shí)給父級div設(shè)置相對定位，相鄰div不設(shè)置定位或浮動嵌巷，本身使用絕對定位萄凤，到想要去的位置，可以讓背景顏色生效搪哪。
