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

來源:互聯網
上載者:User

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中,第四行起作用

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.