淺談CSS hack（瀏覽器兼容）

今天簡單寫一點關於瀏覽器兼容的處理方法，雖然百度上已經有不少，可是我仍是要寫！

先看一個圖

這個圖描述了2016年1月至8月網民們所使用的瀏覽器市場份額（來源：http://tongji.baidu.com/data/browser）。令我感到欣慰的是chrome排第一，chrome一直以來對W3C標準都支持得比較友好，可是圖中也反映了使用IE系列的人數也很多，因此咱們平常作前端開發的時候還要考慮他們的感覺。

如下是正文：

　　個人前任公司作前端的時候，要求兼容IE8及以上，谷歌，火狐三座大山。由於是用的表格佈局（有必定歷史了~），因此平常開發以及維護的時候通常也沒什麼太大的兼容問題要處理。如今谷歌和火狐對W3C標準支持得比較好，特別是最新的版本。如今火狐最新版本是49.0.1.6109，chrome最新版本53.0.2785.116 。寫過幾個HTML5+CSS3的小頁面（3D魔方動畫、簡筆畫+動畫），支持的都很好。某些CSS3屬性不支持直接加前綴 -webkit- 、 -moz- 、-o-、-ms- 便可解決。

 

一句話總結： 各大瀏覽器最新版幾乎都支持W3C標準，但平常開發用到CSS3屬性的時候建議加上前綴，以向前兼容老版本的瀏覽器。

栗子：

transform-style: preserve-3d;　　　　    /*W3C標準*/

-webkit-transform-style: preserve-3d;   /*chrome safari*/

-moz-transform-style: preserve-3d;      /*firefox*/

-0-transform-style: preserve-3d;          /*opera*/

 

說完簡單的來講點不是很複雜的。

IE系列中,IE9及以上對HTML5支持都不錯了。可是IE678仍是有很大的問題，主要就是不支持HTML5的新標籤。

（HTML5加了什麼新標籤？新標籤有什麼做用？請看https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document）

這個問題我認爲比較好的解決方案就是html5shiv.js（什麼？你說還有更好的解決方案？請不吝告知，萬分感謝）

這個文件有興趣的能夠看看，主要是建立了html5的新標籤（慄 article nav等），而後將這些標籤設爲塊級元素。

對於小白來講，使用很是簡單，在頁面的head中添加下面的代碼

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->

當瀏覽器是IE且版本小於IE9的時候，就使用這個js文件，解決不兼容html5的問題。

可是在開發過程當中，解決這些每每不夠，特別是IE 6 7 還有一些內容是會產生不兼容。

栗子：

咱們平時寫導航欄的時候，可能會用到display： inline-block；可是用完之後發現IE6 7 不支持inline-block這個屬性。

那我只好在代碼中添加+display: inline; 而後再用+zoom:1作縮放。

雖然和inline-block仍是有點不一致的地方，可是總體來講仍是能夠的。

這個前綴+只能被IE 67識別，其餘版本瀏覽器都不會識別這句CSS代碼。

display: inline-block;
+display: inline; /*for IE六、7*/

還有其餘前綴，例如 IE6專屬前綴「-」   -display：inline;

前綴"*"  *display:inline; /*IE6 7*/

 除了添加前綴，還能夠用條件註釋hack

栗子：

<!--[if IE 6]> 僅IE6可識別
　　您的代碼
<![endif]-->

<!--[if lt IE 9]> IE9如下版本可識別
　　您的代碼
<![endif]-->

 

IE6還有特別多的BUG，好比著名的3px等，IE67是挺麻煩的，可是如今（2016.9.28）不少公司都再也不要求徹底兼容IE6 7，因此這裏也不詳細說，有前綴hack和條件註釋hack我認爲就夠用了。你們有興趣能夠下載IEtest或者在IE11中調出兼容模式，用IE各類版本看看一些頁面內容豐富的大網站有什麼區別。

說完IE 6 7 最後再囉嗦囉嗦IE 8 

IE8通常狀況下是沒什麼兼容問題，可是IE8沒有專屬的前綴hack,若是出現問題我會用前綴hack來篩選，

（你說條件註釋hack能夠嗎？固然能夠）

看看栗子

栗子：

.div{
　　 width: 100px;
    height: 100px;
    background:green\0;     /* IE 8 9 10專屬*/
    background:red\0\9;     /*IE 9 10專屬*/
    background:red;           /*W3C標準*/
}

這個栗子裏用前綴hack選擇， 除了IE8中DIV顯示背景顏色是綠色，IE9 10和其餘瀏覽器都是紅色。

若是您還有更好更便捷的方法，請不吝告知，萬分感謝。

IE9及以上幾乎都沒有太大的問題。這裏就不囉嗦了。之後工做中發現了再來補充。

最後總結，平常開發中不多會用到IE hack，寫這篇博客也是爲之後以防不測~

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知 ending~