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



以前設計時的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中失效。


"http://img.zemanta.com/pixy.gif?x-id=80ab957a-8083-877d-9e8f-705e09923370" alt="" />

創作者介紹
創作者 ezcshi 的頭像
ezcshi

一陣嘻,噓!

lanc 發表在 痞客邦 留言(12) 人氣()


留言列表 (12)

發表留言
  • Mary
  • 整理的很詳細!

    整理的很詳細,很實用。剛好我遇到一個selector的某一屬性需要符合IE6、7和FF,剛好解決我的問題^^感謝
  • lanc
  • 呵,辛苦了。
    要符合IE6、7 及Firefox 需要比較多的心力處理哪!!
    更講究的話,連opera都要檢查了,不過大體應該是正規的,跟firefox不會有太大差別吧~
  • Dylan
  • 個人為了紀錄這樣的好文章將內容轉載到個人的部落格並且註明來源了。
    如果這麼做不妥且引起您的不悅,請告知。
    小弟必會以最快的速度將之移除。
    感謝您。^___^
  • peilon
  • IE7背景圖

    您好,想請問一下..我在DW設了一個背景圖,程式碼如下
    <TR background="images/index2_1.png">
    <TD height="125" COLSPAN="6"> </TD>
    </TR>

    但是怎麼試IE7就是無法顯示..但FireFox卻可以...我找了很多文章..但是還是不知該如何解決...請問您知道怎麼處理嗎?
  • lanc
  • peilon您好,這個其實算無解喔。
    畢竟tr標籤本身並無background參數。
    因為這不是正規參數,所以其實IE無法顯示是正常。
    不知道您是不是使用割圖軟體所製作?
    或許可以寄信過來討論,畢竟一個TR列可以用各TD背景去組合,也可以用Table的背景去組合。
    一般常用的九宮格排版也是都是動到TD背景而已喔。
    而TR只能設定 bgcolor參數而已。
    → 這是tr的參數網站 http://www.asjh.tn.edu.tw/xupload/learning/html/htmltag/tr.htm

    以上
  • mika
  • 謝謝你讓我克服了臭IE6
    現在他會乖乖聽話了~~
  • 東
  • 你好,謝謝你的這篇好文章,
    讓我解決了IE6,IE7,與FF之間css兼容的問題,
    不然一直搞得我一個頭兩個大呢,
    希望能轉貼此文章到我的部落格去,
    因為怕之後還會遇到同樣的問題,
    我會註明來源的,如您不同意我會立即刪除文章,多謝你^^
  • lanc
  • 有註明來源的話非常歡迎轉貼喔。
    話說IE8也來勢洶洶的,以後又需要兼容時會繼續更新此篇文章的。
  • Rachel
  • 感謝!! 超詳細的!
    不過我會用我自己的方式整理在我的部落格(筆記)內,會註明來源! ^^
  • 小竹
  • peilon 你可以用 css 來設 background 或是用 dl dt dd 的方法制作 table
  • grace
  • 目前網頁撰寫兩個版本IE6及IE8 CSS
    開發的電腦為IE 8 ,測試環境下不會破圖
    但在開發的電腦為IE 8 直接開啟網頁就破圖

    伺服器的IE是否要升級為IE 8
  • lanc
  • 一般應該不會破圖,
    注意一下伺服器跟開發電腦的CSS及images的路徑是否有一致喔。
    若還是有問題可以寫詳細一點,例如:破圖是只有部份掉還是全部掉,以及是下了什麼樣的css,IE8可以IE6就不行這樣~