CSS Hack的資料收集

2021-04-12 19:17:09 字數 2359 閱讀 5939

為了不同瀏覽器的**效果,我們當然沒必要為每個瀏覽器的不同版本寫乙個樣式,這裡我們利用「ie條件注釋」。

找了一些相關的css hack後,總結的幾個方法。

1. 區別ff和ie

1-1首先,當然是!important**,可以提公升指定樣式規則的應用優先權,如下面的例子:

插入**:

div因為!important宣告在ie6中並不是絕對的,它會被之後的同名屬性定義所替換。也就是說在上面的例子中,ie6所應用的是最後乙個背景色的值,即「blue」;而在ff中背景色的值為「red」。

1-2還有一種方法,就是ie瀏覽器可以識別「>」等一些符號,如「~」、「`」、「

插入**:

div在ff中得到的是背景色紅色,而在ie中得到的背景色是藍色,根據樣式重定義的規則,如果瀏覽器可以識別「>」,則應該得到的藍色的背景,因此可以知道「>」只有ie可以識別。

這樣,我們就可以把ff和ie的樣式分離開。下面就是解決ie自己的問題了。

2. 區別ie5.5和ie的其他版本

看乙個例子:

插入**:

div這個例子使用了「>」,只有ie可以識別,在ie6中得到了黑色的背景;而在ie5.5中得到的綠色的背景;在ie5中也得到了黑色的背景。這就 說明了第二句定義只有ie5.5能識別,這是個很早就公布的hack,可以在網上找到相關的資料,要注意的就是在屬性名之後是有乙個空格的。

到此我們已經把ff、ie5.5、ie6分離出來了,那ie5呢?其實現在我們只要把ie5跟ie6分開就ok了。

3. 區別ie5與ie5.5+

插入**:

divdiv/*ie5.5+*/這裡我們又用到乙個hack,就是「div/**/{}」,這個定義在ie5以上的版本才能識別出來。這個例子得到的結果是,在ie5中的背景色為紅色;在ie5以上版本中得到的是黑色背景。

4. 完整的hack

這樣我們就可以為不同的瀏覽器定義不同的樣式了。來看個完整的例子:

插入**:

divdiv/*ie5.5+*/需要注意的是,在上面例子中「background-color」定義的順利不能改變,即ff-ie5-ie6-ie5.5。對於ie的定義在屬性前要加「>」,因為「div/**/{}」這個hack在ff中可以識別。

#hackme

* html #hackme

下面是乙個ie6 png hack,用於內聯css

height:20px; /*for firefox*/

*height:25px; /*for ie7 & ie6*/

_height:20px; /*for ie6*/

ie7的hack

ie7 修復了很多 bug,也增加了對一些選擇符的支援,所以現在諸如 *html {} 和 html>body {} 等針對 ie 隱藏或顯示的 hack 都會在 ie7 中失效。雖然 css hack 不推薦使用,條件注釋才是萬無一失的過濾器,但是條件注釋只能出現在 html 中,css hack 還是有用武之地的。nanobot 發現了一些針對 ie7 的 css hack,具體就是:

>body

html*

*+html

這三種寫法,其中前兩種都是不合法的 css 寫法,在標準相容瀏覽器中被被忽略,但是 ie7 卻不這麼認為。對於 >body ,它會將缺失的選擇符用全域性選擇符 * 代替,也就是將其處理成了 *>body,而且不光對於 > 選擇符,+,~ 選擇符中這個現象也存在。對於 html* ,由於 html 和 * 之間沒有空格,所以也是一種 css 語法錯誤,但 ie7 不會忽略,而是錯誤地認為這裡有乙個空格。對於第三種 *+html,ie7 認為 html 前面的 dtd 宣告也是乙個元素,所以 html 會被選中,這三種方法中只有這一種方法是合法的 css 寫法,也就是說可以通過校驗器的驗證,因此也是作者推薦的 hack 用法。

ie 6 and below

use * html {} to select the html element.

ie 7 and below

use *+html, * html {} to select the html element.

ie 7 only

use *+html {} to select the html element.

ie 7 and modern browsers only

use html>body {} to select the body element.

modern browsers only (not ie 7)

use html>/**/body {} to select the body element。 

瀏覽器 CSS Hack 收集

所謂的hack就是只有特定瀏覽器才能識別這段hack hack 不是什麼好東西,除非沒有辦法,我們盡量還是不要用著玩意。下面是各個瀏覽器的css hack 列表。moz document url prefix 支援所有gecko核心的瀏覽器 包括firefox selector media scre...

各大瀏覽器 CSS Hack 收集

hack就是只有特定瀏覽器才能識別這段hack hack 不是什麼好東西,除非沒有辦法,我們盡量還是不要用著玩意。下面是各個瀏覽器的css hack 列表。firefox 瀏覽器 moz document url prefix 支援所有gecko核心的瀏覽器 包括firefox selector w...

各大瀏覽器CSS Hack收集

蕃薯耀 2015年9月12日 10 11 36 星期六 moz document url prefix 支援所有gecko核心的瀏覽器 包括firefox selector media screen and webkit min device pixel ratio 0 html first chi...