一陣嘻，噓!

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



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

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