501
瀏覽器 CSS 兼容寫法的測試總結
做前端最討厭的就是 IE6，7，8，雖然被淘汰的瀏覽器，但是在中國用戶仍然很多，不可能像國外網站一樣直接就不管它了，這樣會流失很多流量啊。現在有了IE9，IE10還好些，幾乎和 Chrome，Firefox 差別不大了，但是IE6，IE7，IE8還是要做單獨兼容的，這裏總結下兼容方法：
對於 IE6、IE7、IE8 進行 CSS 兼容方法可以看看這篇文章
https://blog.csdn.net/zhouzme/article/details/18901657
以下方法均在 IE6、IE7、IE8、IE9、Chrome、Firefox 中測試過，其他如 Opera 瀏覽器等感覺國內沒什麼用戶的就未涉及
對進行應用開發的另外說明：
- 360 安全瀏覽器使用的是 IE7 內核，
- 08.22補充：今天看了看360的告別IE6站長活動，他的瀏覽器最近好像升級到IE8內核了，估計安全桌麵內核應該也升級為 IE8了
- 360 安全桌麵應用使用的也是 IE7 內核，
- 騰訊的 Qplus 桌麵應用的IE模式使用的是 IE8 內核
以前對 IE9 以下兼容方法是直接在 HTML 的 head 頭裏麵放個 IE 的兼容模式代碼
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />
這樣做就隻需要兼容IE6，IE7。但是無法通過 W3C 驗證的，還有些其他的缺陷，總覺得不太好，所以放棄了。
注意若要用此設置是不能通過 IE 特有的 HTML 瀏覽器判斷語法的來控製的，如：
<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->
這樣寫是沒有用處的，而且必須是放在 head 的頭部否則也不會識別
CSS兼容方法：
- 僅 IE6 和 IE7 識別，使用 * 星號
- 僅 IE6 識別，使用 _ 下劃線區別
- 僅 IE7 識別，使用 + 加號
- 僅 IE8 和 IE9 識別，使用 \0 符號
- 僅 IE9 識別，使用 \9\0 ，同上, 多次測試後發現無效，後麵有補充
- 僅 IE6 不能識別: !important ,
- 全部 IE 均可識別 \9 ,
使用順序：
#test {
color:green !important;
color:#EEE;
color:#0F0\9;
color:#09F\0;
color:#F00\9\0;
*color:#000000;
+color:#630;
_color:#FF0;
}
08.22 補充：
針對IE9兼容之前的寫法有問題
:root #test { color:#F00\0; }這次測試發現貌似隻有這樣寫才能真正的隻讓 IE9 識別
以上CSS將在 ie6 中顯示 #FF0 顏色， IE6以上版本和 chrome、firefox 中顯示 green，
- 去除 !important 後
- IE6, 顯示 #FF0
- IE7, 顯示 #630
- IE8, 顯示 #09F
- IE9, 顯示 #F00
- chrome、firefox 中顯示 #EEE ，
以上的各種特殊符號對瀏覽器兼容基本上就夠了，唯一缺憾是無法區別 chrome 和 firefox，不過還好他們兩個的樣式基本上差不多的，對於一些特殊的 css 屬性可以添加各瀏覽器私有的屬性前綴進行區別，但僅限部分樣式有效
- -webkit- Chrome ...
- -moz- Firefox
- -ms- Microsoft
- -o- Opera
OK，對個瀏覽器的兼容大概 CSS 區別顯示就總結到此，以後再慢慢添加具體的某些兼容方法。
最後更新：2017-04-03 12:54:58