CSS Conditional comments

Due to the different browser version, some elements in the CSS interpretation is not the same, for different browser version and choose different CSS code,
In fact, we can also use conditional annotation method to achieve a similar purpose, what is conditional comments, in this brief introduction, is nothing more than a few if judgment, hehe, but these judgments are not executed in the script, but directly in the HTML code execution, the following to introduce how to use it.

<!--[If xxx]>
Here is the normal HTML code
<! [endif]–>
Here xxx is some specific things, in this list a few out, detailed introduction of their respective meanings:
<!–[if ie]>/If the browser is IE/
<!–[if IE 5]>/If the browser is the version of IE 5/
<!–[if IE 6]>/If the browser is the version of IE 6/
<!–[if IE 7]>/If the browser is the version of IE 7/

The above is a few commonly used to judge the version of IE browser syntax, the following to introduce a relatively less useful logic to determine the parameters:
There are several parameters: LTE,LT,GTE,GT and!
The respective detailed explanations are as follows:

LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.
LT: is less than shorthand, that is, smaller than the meaning.
GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.
GT: is greater than shorthand, that is, the meaning of greater than.

Example:

<!--[if GT ie 5.5]>/If IE version is greater than 5.5/
<!–[if LTE IE 6]>/if IE version is less than or equal to 6/
<!–[if! ie]>/If the browser is not IE/

See here believe that everyone has understood the use of conditional annotations, OK, let's give an example:

<!--default to call the CSS.CSS style sheet first--
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<!--[if! Ie]>
<!– 1.CSS style sheet for non-IE downgrade –>
<link rel= "stylesheet" type= "Text/css" href= "1.css"/>
<! [endif]–>
<!–[if LT IE 6]>
<!– if the Internet Explorer version is less than 6, call the 2.CSS style sheet –>
<link rel= "stylesheet" type= "Text/css" href= "2.css"/>
<! [endif]–>

Define what browser to display under what content.
This dropmenu (drop-down menu) model comes from the cssplay, making it a result of repeated research and repeated testing by the author. I think that this model to practice the principle of conditional annotation.
Let's look at one of the simplest models.
Here is xhtm:

<div class= "Menu" >
<ul>
<li><a class= "Drop" href= ". /menu/index.html ">demos
<!--[if IE 7]><!–>
</a>
<!–<! [endif]–>
&LT;!–IE7 Display </a> label –>
<table><tr><td>
<ul>
<li><a href= ". /menu/zero_dollars.html "title=" The Zero Dollar ads page ">zero dollars advertising page</a></li>
<li><a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text around images</a></li>
<li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li>
<li><a href= ". /menu/nodots.html "title=" removing Active/focus borders ">active focus</a></li>
<li><a class= "Drop" href= ". /menu/hover_click.html "title=" Hover/click with no active/focus borders ">hover/click with no borders</li>
<li class= "Upone" ><a href= ". /menu/shadow_boxing.html "title=" Multi-position drop Shadow ">shadow boxing</a></li>
<li><a href= ". /menu/old_master.html "title=" Image map for detailed information ">image map for detailed information</a></ Li>
<li><a href= ". /menu/bodies.html "title=" background images ">fun with background images</a></li>
<li><a href= ". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li>
<li><a href= ". /menu/em_images.html "title=" em size images compared ">em image sizes Compared</a></li>
</ul>
</td></tr></table>
<!–[if LTE IE 6]>
</a>
<! [endif]–>
</li>
&LT;!–IE6 Display </a> label –>
</ul>
</div>

Css

<link rel= "stylesheet" media= "All" type= "Text/css" href= "Final_drop.css"/>
<!--[If LTE IE 6]>
<link rel= "stylesheet" media= "All" type= "Text/css" href= "Final_drop_ie.css"/>
<! [endif]–>

Adopt the double style, give IE and non-IE define the style separately, if IE time, add a final_drop_ie.css on final_drop.css basis
First look at how the non-ie CSS is defined

. menu UL Li ul {
Display:none;
}
/* Specific to non IE browsers */
. Menu ul Li:hover a {
Color: #fff;
Background: #bd8d5e;
}
/* Define mouse over style */
. Menu UL Li:hover ul {
Display:block;
Position:absolute;
Top:3em;
margin-top:1px;
left:0;
width:150px;
}

In the non-IE, see the mouse slide when the LI contains the UL display, because these browsers support li:hover usage
The CSS under IE

. menu ul li a:hover {
Color: #fff;
Background: #bd8d5e;
}
/* When the mouse is out of date, Li contains the UL display */
. menu ul Li A:hover ul {
Display:block;
Position:absolute;
Top:3em;
left:0;
Background: #fff;
margin-top:0;
marg\in-top:1px;
}

Inherit the above final_drop.css style, no mouse time when Li contains UL does not display
Because

<!--[If LTE IE 6]>
</a>
<! [endif]–>

From:http://www.php100.com/html/webkaifa/div_css/2008/0818/2224.html

CSS Conditional comments