由于不同的瀏覽器對CSS的支持及解析結(jié)果不一樣,處理的優(yōu)先級不一樣。針對不同的瀏覽器來寫不同的CSS達到在不同瀏覽器下顯示想要的效果就是css hack。先貼兩個直觀的對比圖:
再貼一段代碼: #bgcolor { background:red !important; /* Firefox 等其他瀏覽器 */ background:blue; /* IE6 */ } *+html #bgcolor { background:green !important; /* IE7 */ } IE6 不認 !important, 也不認 *+html. 所以 IE6 只能是 blue. 下面以一個實際需求進行不同寫法的實現(xiàn): 針對下面的html代碼: <body> 寫CSS代碼,分別在IE6、IE7、FF下顯示不同的效果: 簡單說明一下:IE6的劃線是在下邊、IE7是中間、FF是上邊。因為IE6兼容性最差(同時下劃線_只有ie6支持),IE7標準居中,F(xiàn)F標準最高。 第一種方法: div{ 原理是:
簡單地說,就是利用下面幾點: 1.各個瀏覽器解析CSS的語法不盡相同 2.CSS語法規(guī)則:后面的屬性覆蓋前面的屬性 而這里僅僅是利用了_(IE6的專屬)和*(用于IE6和IE7),接下來利用一下!important語法。 第二種方法: !important語法針對的是“后面的屬性覆蓋前面的屬性”這一語法,也就是說標識了!important的屬性,是不被后面的相同屬性所覆蓋的,而IE6不認識這個,導(dǎo)致其他瀏覽器很容易根據(jù)這點“欺負”IE6: div{ 原理: 1.FF不認識*,但IE6/IE7認識 2.IE6不認識!imprtant,但IE7認識 注意,順序不能換,如果改為下面這樣: text-decoration:overline; IE6和IE7都一樣了。 IE6是支持!important屬性的(該屬性為CSS1語法,支持IE4+),上面的寫法只是IE6的一個bug(同一個{}里面,相同屬性取后者),若想要IE6支持,一般的做法是將CSS拆分,比如: div{ 這樣,在IE6下,顯示的是line-through效果。 第三種方法: 先看一個表
在此就利用IE6和IE7的專屬寫法: div{ 第四種方法: div{ 原理:利用IE6/IE7的共同專屬 + IE6不懂!important 第五種方法: body>div{ 原理:利用IE6不懂>這種選擇符 + 針對屬性的hack。 另外還有/**/或者@important等方法。 為了通過W3C驗證工具,需要把hack樣式放到不同文件中處理。一個是針對所有瀏覽器的, 一個只為 IE 服務(wù). 將所有符合 W3C 的代碼寫到一個里面去, 而一些 IE 中必須的, 又不能通過 W3C 驗證的代碼 (如: cursor:hand;) 放到另一個文件中, 再用下面的方法導(dǎo)入. <!-- 放置所有瀏覽器的樣式 --> |