前端瀏覽器兼容知識點整理

　作前端，總會涉及到瀏覽器兼容的問題，之因此存在瀏覽器兼容的問題，是由於各個瀏覽器的內核不一樣，相對應的同一套代碼，不一樣的瀏覽器解析後，所呈現的頁面效果也會存在必定的差別。

一 瀏覽器內核差別

　　咱們先來了解一下各個瀏覽器的內核（渲染引擎）：

　　Trident(IE內核)：

　　　　IE六、IE七、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內核，3.x爲IE與Webkit雙核）、百度瀏覽器（早期版本）、世界之窗瀏覽器^[2]  （最初爲IE內核，2013年採用Chrome+IE內核）、2345瀏覽器、騰訊TT、淘寶瀏覽器、採編讀瀏覽器、搜狗高速瀏覽器（1.x爲Trident，2.0及之後版本爲Trident+Webkit）、阿雲瀏覽器（早期版本）、瑞星安全瀏覽器、Slim Browser、 GreenBrowser、愛帆瀏覽器（12 以前版本）、115瀏覽器、155瀏覽器、閃遊瀏覽器、N氧化碳瀏覽器、糖果瀏覽器、彩虹瀏覽器、瑞影瀏覽器、勇者無疆瀏覽器、114瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達瀏覽器、佐羅瀏覽器、海豚瀏覽器（iPhone/iPad/Android）、UC瀏覽器（Blink內核+Trident內核）等。

　　Gecko(Firefox內核)：

　　　　Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位開源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

　　Presto(Opera前內核) (已廢棄)：

　　　　Opera12.17及更早版本曾經採用的內核，現已中止開發並廢棄。

　　Webkit(Safari內核,Chrome內核原型,開源)：

　　　　傲遊瀏覽器三、^[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器。

　　Blink：

　　　　這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支，而且在Chrome（28及日後版本）、Opera（15及日後版本）和Yandex瀏覽器中使用。

　　瀏覽器內核的區別，咱們只作瞭解便可，感興趣的同窗，能夠本身去搜搜啊~

二 兼容問題處理細則

　　一、瀏覽器默認會有一些本身獨有的屬性，像內外邊距啦，圖片邊框啊、input自帶的樣式啊等等，當咱們用到這些標籤及樣式時，就須要手動的清楚瀏覽器默認樣式，好比清除補丁和邊距：*{margin:0;padding:0;}，像這樣使用通配符強制將補丁和邊距置爲零，簡單粗暴，可是這樣處理比較消耗性能，我通常傾向於使用一些CSS樣式重置庫，常見的有如下幾種，你們能夠根據實際需求來選擇：

　　Neat.css：解決Bug，特別是低級瀏覽器的常見Bug；統一效果，但不盲目追求重置爲0；向後兼容；考慮響應式；考慮移動設備。

　　　　　　　http://thx.github.io/cube/doc/neat

　　Reset.css：對瀏覽器樣式的重置（殺傷力偏大）

　　　　　　　  http://meyerweb.com/eric/tools/css/reset/

　　Normalize.css：修復瀏覽器樣式

　　　　　　　　　　https://yuilibrary.com/yui/docs/cssnormalize/

　　除了這些，你們還能夠借鑑百度、淘寶的樣式重置表。

---

　　二、塊級元素浮動後，又使用margin來控制相鄰塊級元素的間距的狀況下，在IE6下，margin值要比咱們設置的值大，這樣，後面浮動的元素就會被擠到下面去，解決方案是：將浮動的塊級元素的display屬性值設爲inline-block。

---

　　三、設置標籤的高度小於10px的時候，在IE6，IE7，遨遊中標籤的高度會超出本身設置高度。解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

---

　　四、行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，ie6間距bug。解決方案：在display:block;後面加入display:inline;display:table;。

---

　　五、幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距。解決方案：使用float屬性爲img佈局。

---

　　六、min-height設置標籤最小高度的時候不兼容。解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

---

　　七、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]-->

　　類內屬性前綴法+選擇器前綴法：

　　　　在標準模式中：

　　　　「-″減號是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;/*IE六、七、8識別*/
    +background-color: #fff;/*IE六、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 有效 */ 
        }
    }

---

　　八、!important

　　在ie6下，同一個大括號裏對同一個樣式屬性定義，其中一個加important 則important標記是被忽略的，例：{background:red!important; background:green;} ie6下解釋爲背景色green，其它瀏覽器解釋爲背景色red；若是這同一個樣式在不一樣大括號裏定義，其中一個加important 則important發揮正常做用，例：div{background:red!important} div{background:green}，這時全部瀏覽器統一解釋爲背景色red。

---

　　九、點擊超連接後，hover、active樣式不生效。解決方案，css屬性排列爲L-V-H-A。

---

 

　　十、給塊級元素設置高度高度的時候，最好也同時設置上line-height屬性值。

---

　　十一、去除超連接虛線邊框的問題。當點擊超連接時，ff、ie六、ie七、ie8會出現虛線邊框。

　　　　解決方案：ie6/7中 設置爲a {blr:expression_r(this.onFocus=this.blur()) }

　　　　　　　　　ie8 和 ff 都不支持expression 在ie8 、ff中設置爲  :focus { outline: none; }

---

　　十二、css濾鏡的問題：ff、safari、chrome、opera使用opacity屬性，ie使用設置filter:alpha(opacity=50)時，ie6/7失效，還要設置zoom:1width:100%。

---

　　1三、IE8不兼容Bootstrap框架的解決方案。

　　　　引入respond.min.js庫，兼容響應式佈局。不過須要注意的是，這個庫不能放在本地路徑下（Fill://），要用靜態資源連接或者放在服務器上才能生效。

---

　　1四、不兼容H5標籤的解決方法：引入html5shiv.min.js文件。

---

　　1五、不兼容rem單位的解決方法：引入html5shiv.min.js文件。引入rem.min.js文件，不過這個文件的引入位置要放在頁面最下方。

---

　　1六、IE8下，父級div或者兄弟div有浮動或定位屬性的時候，div模塊設置背景顏色會失效，或者div自己有浮動屬性，設置背景色也可能會失效，此時注意佈局的方法，我遇到過的是第一種狀況，個人解決方法時給父級div設置相對定位，相鄰div不設置定位或浮動，自己使用絕對定位，到想要去的位置，可讓背景顏色生效。

---

　　在製做頁面的時候，咱們都會遇到各類各樣的問題，可是代碼規範，遵循你們都使用的準則，兼容的問題就能少一些，這裏只列舉了一部分，之後有其餘的內容我也會繼續補充~