before doing web pages, only consider the compatibility of IE6 and FF, the company changed, the request is also high, FF and IE 6 7 8 to be fully compatible,
Met to be alone hack IE8. Of course, it is very convenient to use annotations, just add the appropriate comments can be resolved. But the problem is that it's not a lazy habit to write more than one file for a CSS, or to add a comment to the header. The conclusions are as follows:
selector{
Property:value; /* All Browsers * *
Property:value9; /* All IE browsers * *
+property:value; * IE7 * *
_property
Of course, note the order. According to the precedence of CSS, the above wording, respectively, for Firefox, IE8, IE7 and IE6 display values. Let's take a look at this:
The CSS code is as follows:
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb; background: #f7f7f7; font:15;
Color:blue; All browsers
Color:brown9; All IE browsers
+color:red; IE7
_color:green; IE6
}
HTML Codes:
<body style= "width:500px;margin:0 auto;" >
<p class= "ie" >
<span style= "DISPLAY:BLOCK;DISPLAY:NONE9;" > Hey, the Kid also uses Firefox, blue text. </span>
<!--[if IE 8]> good, pretty advanced, use IE8! The text is brown. <! [endif]-->
<!--[if IE 7]> you, IE7, red text! <! [endif]-->
<!--[if IE 6]> children, although the display is green text, but IE6 is not a good thing! <! [endif]-->
</p>
</body>
Note that the hack that are described below apply only to XHTML1.0. If the HTML is not preceded by the
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Then the effect will be different! In addition, the IE8 described here does not refer to the IE8 compatibility mode, because the IE8 compatibility mode is actually IE7.
Differences between IE6, 7 and FF/IE8:
Background:blue;*background:orange;
Reference
Display effect:
IE 6/7:orange
Ff/ie8:blue
Principle: FF/IE8 does not support the opening of the *, and IE6/7 supports it.
Distinction between IE6 and IE7/IE8/FF:
Background:green;_background:blue;
Reference
Display effect:
Ie7/8/ff:green
Ie6:blue
Principle: IE6 supports underscore "_", IE7, 8, and Firefox do not support underlining.
Differences between FF/IE8 and IE6/7:
Background:orange;+background:green;-background:blue;
Or
Background:orange;*background:green!important;*background:blue;
Reference
Display effect:
Ie6:blue
Ie7:green
Ff/ie8:orange
Principle: IE6 can identify-,ie7 can identify +,IE8 and FF are not recognized + and-
IE8/FF does not recognize *,IE7 priority recognition!important,ie6 does not recognize!important.
About IE8 's hacks:
. test{
color:/***/#00f9; /* IE8 Only * *
Color: #00f9; /* Applies to all IE versions * *
}
Can distinguish IE8, IE7, IE6, Firefox css hacks at the same time:
. test{
Color: #000; * * Firefox *
color:/***/#00f9; * IE8 * *
*color: #f00; * IE7 * *
_color: #0f0; * IE6 * *
}
Add appropriate annotations to resolve compatibility issues
Note the corresponding CSS file:
<link rel= "stylesheet" type= "Text/css" href= "css/style.css" media= "screen"/>
<!--[if IE 6]>
<link rel= "stylesheet" type= "Text/css" href= "css/ie6style.css" media= "screen"/>
<! [endif]-->
<!--[if IE 7]>
<link rel= "stylesheet" type= "Text/css" href= "css/ie7style.css" media= "screen"/>
<! [endif]-->
<!--[if GTE IE 8]>
<link rel= "stylesheet" type= "Text/css" href= "css/ie8style.css" media= "screen"/>
<! [endif]-->
Note the corresponding CSS content:
<!--[if IE 6]>
<style>
<!--
#warp {padding-bottom:11px;}
-->
</style>
<! [endif]-->
<!--[if IE 7]>
<style>
<!--
#warp {padding-bottom:11px;}
-->
</style>
<! [endif]-->
<!--[if IE 8]>
<style>
<!--
#warp {padding-bottom:11px;}
-->
</style>
<! [endif]-->
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
