因為最近網站實做要用到,所以順便整理起來,有需要的看官請自行取用。
以前設計時的IE與FF區分
一般常會去動到margin,所以都是在原始的下面加*號,因為都是由上往下讀取,所以*出現時,就會把上方的設定值蓋掉。藉此來區分IE跟FF,也就是個別設定。
IE6、IE7、FF都成
現階段如果要設計三種通吃,大概就用這種方式吧。
以前設計為IE6、FF,現在得加入IE7
好吧,我就是這類型的,以前設計是區分好IE6、FF,哪知道該死的廠商安裝新電腦、新系統時,都更新為ie7...
一些ie7的問題就浮現了,現在只能又針對ie7做補強型的修改。
若在屬性前增加 *+ html是沒有用的,要加在 {} 前。
這類型的解法:*+html → IE7 認為 html 前面的 DTD 聲明也是一個元素,所以 html 會被選擇。
下面是網路上找的資料,有需要就點進去看吧。
※發現網路上有一篇解釋很清楚的部落格記載:歲月如歌
下面的是轉貼自 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和firefox均不支持下劃線。
於是大家還可以這樣來區分IE6,IE7,firefox:
貼自歲月如歌解釋
ie6中錯誤的認為HTML元素擁有一個不存在的父元素,因此* html招數能起作用;
ie7中修復了上面這個錯誤,但把前面的認為是一個和html元素毗鄰的註釋元素,因此*+html招數在前面有聲明時起作用;
firefox等現代瀏覽器中則把前面的當成一個單獨的DTD聲明,html元素是根元素,不存在父元素,也沒有毗鄰的兄弟元素,符合W3C規範。
特別值得注意的是,如果源文件頭部沒有DTD聲明或者聲明不正確,ie7會採取quirk模式,* html招數將起作用;只用在DTD聲明正確的情況下,*+html招數對ie7才有用,同時* html在ie7中失效。
以前設計時的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均不支持下劃線。
於是大家還可以這樣來區分IE6,IE7,firefox:
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中失效。












Recommend to Front page
置頂.常用(2)



整理的很詳細!
整理的很詳細,很實用。剛好我遇到一個selector的某一屬性需要符合IE6、7和FF,剛好解決我的問題^^感謝要符合IE6、7 及Firefox 需要比較多的心力處理哪!!
更講究的話,連opera都要檢查了,不過大體應該是正規的,跟firefox不會有太大差別吧~
如果這麼做不妥且引起您的不悅,請告知。
小弟必會以最快的速度將之移除。
感謝您。^___^
IE7背景圖
您好,想請問一下..我在DW設了一個背景圖,程式碼如下<TR background="images/index2_1.png">
<TD height="125" COLSPAN="6"> </TD>
</TR>
但是怎麼試IE7就是無法顯示..但FireFox卻可以...我找了很多文章..但是還是不知該如何解決...請問您知道怎麼處理嗎?
畢竟tr標籤本身並無background參數。
因為這不是正規參數,所以其實IE無法顯示是正常。
不知道您是不是使用割圖軟體所製作?
或許可以寄信過來討論,畢竟一個TR列可以用各TD背景去組合,也可以用Table的背景去組合。
一般常用的九宮格排版也是都是動到TD背景而已喔。
而TR只能設定 bgcolor參數而已。
→ 這是tr的參數網站 http://www.asjh.tn.edu.tw/xupload/learning/html/htmltag/tr.htm
以上
現在他會乖乖聽話了~~
讓我解決了IE6,IE7,與FF之間css兼容的問題,
不然一直搞得我一個頭兩個大呢,
希望能轉貼此文章到我的部落格去,
因為怕之後還會遇到同樣的問題,
我會註明來源的,如您不同意我會立即刪除文章,多謝你^^
話說IE8也來勢洶洶的,以後又需要兼容時會繼續更新此篇文章的。
不過我會用我自己的方式整理在我的部落格(筆記)內,會註明來源! ^^
Comment Permissions: Allow commenting