今天紀錄一下修正不同瀏覽器間顯示問題的利器–CSS Hack。
如果要把全部CSS寫在同一檔案裡，可利用CSS的先後順序（後面的設定會蓋掉前面的）達到修正效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
; html-script: false ] .test { color: yellow; /* for main browsers */ color: red \9; /* for all IE */ color: pink; /* 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://ithelp.ithome.com.tw/question/10137301