瀏覽器兼容性問題是指因?yàn)椴煌臑g覽器對(duì)同一段CSS代碼或者JS代碼解析不同導(dǎo)致頁面顯示效果不統(tǒng)一或者腳本執(zhí)行錯(cuò)誤的情況。一般情況下，我們希望用戶無論使用什么瀏覽器來查看網(wǎng)頁效果都應(yīng)該是一樣的。瀏覽器的兼容性問題是Web前端開發(fā)人員經(jīng)常會(huì)碰到的和必須要解決的問題。
瀏覽器兼容的部分一般分為CSS部分和JS部分掀亥，JS部分請(qǐng)參考這里。
相關(guān)的問題已近在前端界整理的很充分了妥色，大致的問題可總結(jié)如下：
- 瀏覽器的初始化樣式不同導(dǎo)致兼容性的問題
- 局部樣式解析不同導(dǎo)致的bug
有些文章把樣式使用技巧也放到兼容性的問題里面搪花，這有失偏頗，關(guān)于常用樣式使用技巧在另一邊文章敘述嘹害，這里不重復(fù)撮竿。
1. 瀏覽器的初始化樣式不同導(dǎo)致兼容性的問題
對(duì)于這個(gè)問題可以一上來就是用*{margin:0;padding:0;}，不過這個(gè)代碼的殺傷力有些大笔呀，如果用戶自定義樣式未加載進(jìn)來幢踏，則整個(gè)頁面的布局毫無結(jié)構(gòu)可言。
所以這里出現(xiàn)兩個(gè)瀏覽器默認(rèn)樣式重置庫：Normalize.css和reset.css许师，上面的鏈接是項(xiàng)目的介紹房蝉。
關(guān)于這兩個(gè)庫的對(duì)比介紹也比較詳細(xì)，簡(jiǎn)單的說：Normalize 的理念則是盡量保留瀏覽器的默認(rèn)樣式枯跑，不進(jìn)行太多的重置惨驶；而Reset的目的，是將所有的瀏覽器的自帶樣式重置掉敛助，這樣更易于保持各瀏覽器渲染的一致性。
瀏覽器默認(rèn)樣式重置就像是貼墻紙前先上一遍膩?zhàn)訉δㄖ笤儋N屋确。Normalize.css或者Reset.css需要在所有樣式引用前引用纳击。就我個(gè)人而言续扔，使用Normalize.css比較多一些。
2. 局部樣式解析不同導(dǎo)致的bug
其實(shí)焕数，這里主要是IE瀏覽器和非IE瀏覽器之間的解析區(qū)別纱昧。如果使用了normalize或者reset后能處理大部分的問題，下面是剩余的部分：
2.1 透明度的兼容CSS設(shè)置
解決方式：
- IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)堡赔。
- 非IE：opacity:0.6识脆。
2.2 默認(rèn)的盒子解析模型
標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border善已、padding灼捂、content，并且 content 部分不包含其他部分换团； IE盒子模型的范圍也包括 margin悉稠、border、padding艘包、content的猛。
和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
因此想虎，問題主要表現(xiàn)在css中的width是否計(jì)算border和padding的問題卦尊，這個(gè)是默認(rèn)的盒子解析模型不同導(dǎo)致的。
IE6：中包括border和padding(box-sizing: border-box;)
IE7和非IE：width寬度不包括border和padding(box-sizing: content-box;)
解決方式： 根據(jù)使用方式舌厨，寫好box-sizing屬性岂却。
2.3 浮動(dòng)問題
主要表現(xiàn)是子元素使用了浮動(dòng)，而父元素沒有撐開盒子邓线，下面是解決的代碼淌友，加載父元素上就好。
解決技巧：
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
2.4 高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)骇陈，特別是當(dāng)內(nèi)層對(duì)象使用margin 或padding時(shí)震庭。
例如：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對(duì)象中的內(nèi)容＜/p>
</div>
解決技巧：
- 在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼{height:0px;overflow:hidden;}
- 或者為DIV加上border屬性
2.5 滾動(dòng)條顏色設(shè)置
IE無法設(shè)置滾動(dòng)條顏色了, 解決辦法是將body換成html
解決技巧：
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
2.6 超鏈接訪問過后hover樣式就不出現(xiàn)的問題
被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個(gè)問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A
解決技巧：
a:link {}
a:visited {}
a:hover {}
a:active {}
2.7 條件注釋
在html中加入條件判斷，選擇激活哪些部分
解決技巧：
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
lte -- 小于等于
lt -- 小于
gte -- 大于等于
gt -- 大于
你雌！ -- 不等于
2.8 background-attachment:fixed在ios下失效的hack
ios系統(tǒng)和某些移動(dòng)端background-attachment:fixed不兼容性器联，沒有任何效果，但可以hack一下就可以了婿崭，代碼如下:
ps：想在哪個(gè)標(biāo)簽加背景拨拓，可以在它c(diǎn)lass后:before.
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(path/to/image) center 0 no-repeat;
background-size: cover;
}
2.9 Calc使用
瀏覽器支持的不是很好，而且在使用的時(shí)候要加上廠商前綴氓栈，達(dá)到兼容性渣磷。另外，注意減號(hào)之間的空格授瘦。
width: calc(100% - 80px);
#formbox {
width: 130px;
/*加廠商前綴醋界，操作符（+竟宋，-，*形纺，/）兩邊要有空格）*/
width: -moz-calc(100% / 6);
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
最后
除去以上的總結(jié)丘侠，還有很多是關(guān)于在IE6下的Hack，但是這個(gè)“老古董”在市面上的占有率已近相當(dāng)?shù)土酥鹧硗馕献郑凑沼缮系较碌拈_發(fā)模式(優(yōu)先兼容高級(jí)瀏覽器)，IE8及以下的瀏覽器都可不用重點(diǎn)考慮脂新。因此挪捕，關(guān)于樣式兼容性的問題重點(diǎn)放到瀏覽器樣式重置、flex布局戏羽、CSS 預(yù)處理器(SCSS/Less)担神、CSS后處理器(Autoprefixer/Postcss/Cssnano)上就可以解決大部分問題。
此外始花，關(guān)于Hack的問題不需要全部記住妄讯，只需要記住大概的問題點(diǎn)，在做布局的時(shí)候盡量避免酷宵，遇到問題查問題亥贸。我認(rèn)為這部分問題會(huì)隨著技術(shù)或者瀏覽器的更迭而全部解決，因此不需要放太多精力浇垦。
