不推薦使用的CSS Hack

以下是不建議使用的CSS Hack技術,因為有些是透過使用不正確的CSS語法來達到對特定瀏覽器隱藏屬性的目的。

_property: value and -property: value
不正確的CSS語法,IE6以及更早的IE版本可以接受,但是其他瀏覽器都會忽略這個錯誤語法,這個問題在IE7的時候已經被修正。

*property: value
IE7雖然修正了_以及-的錯誤,但是其他不被接受的字元卻沒有修正(標準的做事做一半),因此如果你在屬性名稱前面加上*號,其他瀏覽器都不接受這種錯誤寫法,但卻被所有的IE瀏覽器(包括IE7)接受。因為CSS對於*號的規範並沒有像_和-那樣有異議,所以如果使用這個方法也許會產生不可預期的CSS錯誤;另外,IE未來極有可能會修正這樣的bug,所以還是不要用吧。

body:empty
:empty是CSS3的擬態類別,目的是用來選取裡面沒有包含任何元素的標籤;例:body:empty即是選取不含任何內容及元素的<body>標籤;不過這個擬態類別在FireFox1.5和2.0裡面,即使<body>裡面有東西,卻老是會選到。不過這主要是因為現在還是CSS2.1的階段,尚未全面支援CSS3,未來支援了以後,這個方法就行不通了。

a:link:visited, a:visited:link
這也是擬態類別的一種,ㄧ般寫成a:link, a:visited,但是a:link:visited的寫法也是可以,不過IE的瀏覽器只要看到兩個擬態類別接在一起就無法辨識;這個bug,未來應該也是會被修正。

>body
>是CSS的子代選取器,一般來講,子代選取器的使用方法是div>p這種用法,也就是要有一個父元件才可以成立,因此>body是不正確的寫法,除了IE外,其他的瀏覽器都會將它忽略掉。但是IE會把>body解讀成*>body,*是廣域選擇器的意思,所以還是可以解讀;包括+p會解讀成*+p,~p會解讀成*~p,以及>>會解讀成*>*>*。(~是CSS3的父層選擇器,CSS2.1目前還不支援)

html*
IE7也許修正了對*(廣域選擇器)的支援,但是當廣域選擇器直接接在一個標籤之後中間沒有空格時,IE7會莫名奇妙的自動幫他加上空格(例如:html*變成html *),其他的瀏覽器則是忽略這樣的錯誤語法。

!ie
IE7修正了!important的辨識問題,但是如果遇到有人把!important寫錯了,IE的瀏覽器就會乖乖的讀,好像這個錯誤不曾存在一樣,所以,寫!ie或是!abc,在其他瀏覽器當中都會被當成錯誤
而不解讀,但在IE卻是可以被接受的。不過,畢竟不是正確的寫法,也是ie改版時常常虎頭蛇尾所造成的bug,還是不建議使用。

!important!
另外一個關於!important的問題,也是IE7沒有修正好的。通常,在屬性設定的結尾是不接受任何非字母型態的字元,遇到這種錯誤時,瀏覽器大多是將整個屬性忽略掉,不過IE的作法卻是忽略掉最後面那個非字母型態的字元,所以如果你使用!important!,IE就會把它當成!important來看待,而其他瀏覽器則會忽略。

如果你現在的網站,使用了上述的方法,請改用建議使用的CSS HACK技巧吧!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s