- 184 月
-
CSS Hack
為了符合W3C的規範,我們會儘量避免使用hack,如果有瀏覽器無法統一的情況發生,要先試著找找是不是因為bug產生的原因,如果不是再來做hack。編寫樣式時應以Firefox為主要優先的瀏覽器,再對IE做hack,並選擇可以通過W3C驗證的hack,原本IE6用的_和IE7用的*都應該盡量不要使用了,而改以可以通過W3C驗證的為主。底下列出我們所使用的hack。
- 所有IE (property\9;)、IE8(property\0;)
範例:
p { width: 100px\9; } (無法通過w3c驗證,盡量不要使用)
p { width: 100px\0; } (無法通過w3c驗證,盡量不要使用)
- IE6 (* html {})
IE6使用的hack有_property、* html {},但是我們使用的hack是:* html {},因為_property不能通過W3C驗證,而* html {}可以。
範例:
* html p { width: 100px; }
p { _width: 100px; } (無法通過w3c驗證,盡量不要使用)
- IE7 (*:first-child+html {})
IE7使用的hack有*property、*:first-child+html {},但是我們使用的hack是:*:first-child+html {},因為*property不能通過W3C驗證,而*:first-child+html {}可以。
範例:
*:first-child+html p { width: 100px; }
p { *width: 100px; }(無法通過w3c驗證,盡量不要使用)
- IE6 (!important)
如果只是IE6和其他瀏覽器不同的話,可以用!important來做hack,這樣可以避免又寫了一堆css出來 (這是利用IE6在同一個樣式裡面,出現兩個以上相同的屬性時,只會認得最後一個的特性,並非IE6不認得!important)。
範例:
在這個範例裡面,寬100px是給IE6以外的瀏覽器看的,而寬120px則是給IE6看的。
p {
width: 100px !important;
width: 120px;
}
- 除錯工具
W3C css驗證的網址:http://jigsaw.w3.org/css-validator/Firefox有幾個附加元件可以加速我們除錯,或是審察我們的檔案有沒有符合W3C的規範。
1. Firebug:可以觀察頁面元素的css、js等。
2. HTML Validator:可以看結構是否正確,有沒有漏掉什麼必要屬性。
3. Web Developer:安裝後會在Firefox出現一條tool bar,css、cookie、表單、圖片的功能都有,可以很快速的由這些元件檢查CSS、HTML是否符合W3C規範。操作方法:工具→驗證本機CSS、工具→驗證本機HTML。
參考資源:
Definitive Guide to Taming the IE6 Beast
centricle : css filters (css hacks)Posted by admin Posted on 18 4 月 - 所有IE (property\9;)、IE8(property\0;)
Post Comments 0