今天紀錄一下修正不同瀏覽器間顯示問題的利器--CSS Hack。
今天紀錄一下修正不同瀏覽器間顯示問題的利器--CSS Hack。

如果要把全部CSS寫在同一檔案裡，可利用CSS的先後順序（後面的設定會蓋掉前面的）達到修正效果。

.test {
color: yellow; /* for main browsers */
color: red \9; /* for all IE */
color: pink\0; /* for IE8，但IE10跟Opera 12.16也看得懂 */
*color: green; /* for IE7 */
_color: blue; /* for IE6 */
}

:root .test { 
color:gray \9; /* IE9，但IE10也看得懂 */
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.test {	color: orange;	} /* for Chrome and Safari，但Opera 15.0以後也看得懂 */
}

@media all and (min-width: 0px) {
.test {	color: black;	} /* for Opera，但 Chrome跟Safari也看得懂 */
}

但是這樣測試下來會發現CSS能不用則不用其實是最好的。除了W3C驗證不合格以外，如果瀏覽器日後更新，將有可能導致CSS無作用（例：Opera），屆時仍然要重新改過。幸好瀏覽器部份問題比較多的大多仍在舊版IE，此時IE判斷式就可正式上場囉！

以上若有誤煩請不吝指教m(_ _)m
本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_13/