CSS 於IE6、IE7、Firefox間的兼容hack

  • 0
以下是從一陣嘻,噓!轉貼過來的,解決了困擾我好久的問題。
-----------------------------------------------

因為最近網站實做要用到,所以順便整理起來,有需要的看官請自行取用。


以前設計時的IE與FF區分
一般常會去動到margin,所以都是在原始的下面加*號,因為都是由上往下讀取,所以*出現時,就會把上方的設定值蓋掉。藉此來區分IE跟FF,也就是個別設定。
margin-top:0; // 原始(FF)
*margin-top:-2px; // IE


IE6、IE7、FF都成
現階段如果要設計三種通吃,大概就用這種方式吧。
background:#FFF; // 原始(FF)
*background:#39f; // IE6、IE7
_background:#f9f; // IE6 only


以前設計為IE6、FF,現在得加入IE7
好吧,我就是這類型的,以前設計是區分好IE6、FF,哪知道該死的廠商安裝新電腦、新系統時,都更新為ie7...
一些ie7的問題就浮現了,現在只能又針對ie7做補強型的修改。
若在屬性前增加 *+ html是沒有用的,要加在 {} 前。
這類型的解法:*+html → IE7 認為 html 前面的 DTD 聲明也是一個元素,所以 html 會被選擇。


body{
background:#FFF; // 原始(FF)
*background:#39f; // IE6、IE7
}

*+html body{ // IE7 only
background:#f9f;
}


下面是網路上找的資料,有需要就點進去看吧。
※發現網路上有一篇解釋很清楚的部落格記載:歲月如歌



下面的是轉貼自 DIV+CSS 的文章,自己整理一下,讓可閱性提高。

區別IE6與FF:
FF → background:orange;
IE6→*background:blue;


區別IE6與IE7:
IE7→background:green !important;
IE6→background:blue;


區別IE7與FF:
FF → background:orange;
IE7→*background:green;


區別FF,IE7,IE6:
FF → background:orange;
IE7→*background:green !important;
IE6→*background:blue;


註:IE都能識別*;標準瀏覽器(如FF)不能識別*;
IE6能識別*,但不能識別 !important,
IE7能識別*,也能識別!important;
FF不能識別*,但能識別!important;
  

IE6 IE7 FF
* ×
!important ×


另外再補充一個,下劃線"_",
IE6支持下劃線,IE7和firefox均不支持下劃線。

於是大家還可以這樣來區分IE6IE7firefox:

FF → background:orange;
IE7→*background:green;
IE6_background:blue;

註:不管是什麼方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最後面。



網路上找來的解法一覽

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.


貼自歲月如歌解釋
ie6中錯誤的認為HTML元素擁有一個不存在的父元素,因此* html招數能起作用;
ie7中修復了上面這個錯誤,但把前面的認為是一個和html元素毗鄰的註釋元素,因此*+html招數在前面有聲明時起作用;
firefox等現代瀏覽器中則把前面的當成一個單獨的DTD聲明,html元素是根元素,不存在父元素,也沒有毗鄰的兄弟元素,符合W3C規範。

特別值得注意的是,如果源文件頭部沒有DTD聲明或者聲明不正確,ie7會採取quirk模式,* html招數將起作用;只用在DTD聲明正確的情況下,*+html招數對ie7才有用,同時* html在ie7中失效。
張貼留言