CSS在IE6/IE7/IE8/Firefox相容問題

1.符號*的使用。

IE6，IE7都可以識別*，但IE8和Firefox都識別不了。看以下樣式

# wintop
{
background: url(body-top.gif) top repeat-x;
margin-top:10px;
*margin-top:0px;
}

在IE6和IE7中解釋為離上邊距為0個像素，因為它可以識別*，因而*margin-top:0px覆蓋了上面的10px。而在IE8和Firefox中，由於它不能識別*，所以仍然解釋為離上邊距10個像素。

2.* html針對IE6

.content
{
background-color: Gray;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
* html .content
{
/* IE6 */
margin-top: 100px;
}

margin-top的100個像素只對IE6起作用。

3.!important對IE6來說不識別，因此我們也可以用它來對IE6和IE7/IE8/FF區別做處理。

.content
{
background-color: Gray;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
margin-left:0px !important;
margin-left:100px;
}

注意：在IE7，IE8和Firefox中優先解釋帶!important的元素，所以下面的margin-left:100px不會覆蓋上面的margin-left:0px !important。

但對IE6來說，它只能識別margin-left:100px。

4.*和!important組合使用，看下面例子：

background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;

在FF和IE8中，第一行起作用

在IE7中，第二行起作用

在IE6中，第四行起作用