-----------------------------------------------
因為最近網站實做要用到，所以順便整理起來，有需要的看官請自行取用。
以前設計時的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中失效。
沒有留言:
張貼留言