一句話總結(jié): 各大瀏覽器最新版幾乎都支持W3C標(biāo)準(zhǔn)谓苟,但日常開發(fā)用到CSS3屬性的時候建議加上前綴,以向前兼容老版本的瀏覽器。
栗子:
transform-style: preserve-3d; /*W3C標(biāo)準(zhǔn)*/
-webkit-transform-style: preserve-3d; /*chrome safari*/
-moz-transform-style: preserve-3d; /*firefox*/
-0-transform-style: preserve-3d; /*opera*/
IE系列中,IE9及以上對HTML5支持都不錯了。但是IE678還是有很大的問題聚至,主要就是不支持HTML5的新標(biāo)簽,這個問題我認(rèn)為比較好的解決方案就是html5shiv.js本橙,如下:
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->
在開發(fā)過程中IE 6 7 還有一些內(nèi)容是會產(chǎn)生不兼容扳躬。
比如:我們平時寫導(dǎo)航欄的時候,可能會用到display: inline-block甚亭;但是用完以后發(fā)現(xiàn)IE6 7 不支持inline-block這個屬性贷币。那我只好在代碼中添加+display: inline; 然后再用+zoom:1做縮放。雖然和inline-block還是有點(diǎn)不一致的地方亏狰,但是整體來說還是可以的役纹。這個前綴+只能被IE 67識別,其他版本瀏覽器都不會識別這句CSS代碼暇唾。
display: inline-block;
+display: inline; /*for IE6促脉、7*/
還有其他前綴辰斋,例如 IE6專屬前綴“-” -display:inline;
前綴"*" *display:inline; /*IE6 7*/
除了添加前綴,還可以用條件注釋hack瘸味,如下:
<!--[if IE 6]> 僅IE6可識別
您的代碼
<![endif]-->
<!--[if lt IE 9]> IE9以下版本可識別
您的代碼
<![endif]-->
工作中常用的IE hack如下:
.div{
width: 100px;
height: 100px;
background:green\0; /* IE 8 9 10專屬*/
background:red\0\9; /*IE 9 10專屬*/
background:red; /*W3C標(biāo)準(zhǔn)*/
}