1. 程式人生 > >IE6 IE7 FF的CSS Hack總結

IE6 IE7 FF的CSS Hack總結

<本文為轉貼,方便自己日後檢視!~>

針對的html程式碼:
<body> 
    <div><span>Text</span></div> 
</body>
  寫CSS程式碼,分別在IE6、IE7、FF下顯示不同的效果:
  簡單說明一下:IE6的劃線是在下邊、IE7是中間、FF是上邊。因為IE6相容性最差,所以優先順序自然低了,何況它的hack方法就是採用下劃線;IE7比較中規中矩;FF則最標準了,這下能記住各個圖對應的是哪個瀏覽器了吧:)
  OK,開始我們的hack之旅吧。
  第一種方法:
div{ 
    text-decoration:overline; 
    *text-decoration:line-through; 
    _text-decoration:underline; 
}
  原理是:
  簡單地說,就是利用下面幾點:
 
  1.各個瀏覽器解析CSS的語法不盡相同
  2.CSS語法規則:後面的屬性覆蓋前面的屬性
  而這裡僅僅是利用了_(這個很好記,IE6的專屬)和*(用於IE6和IE7),接下來利用一下!important語法。
  第二種方法:
  !important語法針對的是“後面的屬性覆蓋前面的屬性”這一語法,也就是說標識了!important的屬性,是不被後面的相同屬性所覆蓋的,而IE6不認識這個,導致其他瀏覽器很容易根據這點“欺負”IE6:
div{ 
    text-decoration:overline; 
    *text-decoration:line-through!important; 
    *text-decoration:underline; 
}
  原理:
  1.FF不認識*,但IE6/IE7認識
  2.IE6不認識!imprtant,但IE7認識
  注意,順序不能換,如果改為下面這樣:
text-decoration:overline; 
*text-decoration:underline; 
*text-decoration:line-through !important;
  IE6和IE7都一樣了。
  上網查了一下,IE6是支援!important屬性的(該屬性為CSS1語法,支援IE4+),上面的寫法只是IE6的一個bug(同一個{}裡面,相同屬性取後者),若想要IE6支援,一般的做法是將CSS拆分,比如:
div{
    text-decoration:line-through!important; 
}
div{
    text-decoration:underline;
}
  這樣,在IE6下,顯示的是line-through效果。
  第三種方法:
  先看一個表
  為了方便記憶,在上面那個hack表增加了“針對物件”一列(關於*旁邊有無空格均可,可以理解其同時也作為分隔符),需要補充的是IE7的專屬寫法:*+html div
  在此就利用IE6和IE7的專屬寫法:
div{ 
    text-decoration:overline; 
} 
*+html div{ 
    text-decoration:line-through; 
} 
* html div{ 
    text-decoration:underline; 
}
  第四種方法:
div{ 
    text-decoration:overline; 
} 
html*div{ 
    text-decoration:line-through !important; 
    text-decoration:underline; 
}
  原理:利用IE6/IE7的共同專屬 + IE6不懂!important
  第五種方法:
body>div{ 
    text-decoration:overline; 
    *text-decoration:line-through; 
} 
div{ 
    text-decoration:underline; 
}
  原理:利用IE6不懂>這種選擇符 + 針對屬性的hack