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" xhref= "Css.css"/>
<!--[if! Ie]>
<!– 1.CSS style sheet for non-IE downgrade –>
<link rel= "stylesheet" type= "Text/css" xhref= "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" xhref= "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:

HTML code

2. <div class="menu">
4. <ul>
6. <li><a class="Drop" xhref=". /menu/index.html ">demos
8. <!--[if IE 7]><!–>
10. </a>
12. <!–<! [endif]–>
14. <!–ie7 </a> Label when displayed –>
16. <table><tr><td>
18. <ul>
20. <li>< a xhref= ". /menu/zero_dollars.html " title=" The zero dollar ads page " span class= "tag" >>zero dollars advertising page</ A></li>  
22. <li>< a xhref= ". /menu/embed.html " title=" Wrapping text around images " >wrapping text around images</ A></li>  
24. <li>< a xhref= ". /menu/form.html " title=" styling forms ">styled form </a></ li>  
26. <li>< a xhref= ". /menu/nodots.html " title=" Removing active/focus borders " >active focus</a>< span class= "tag" ></li>  
28. <li>< a class= "Drop"  xhref= ". /menu/hover_click.html " title=" Hover/click with no active/focus  borders ">hover/click with no borders</li>  
30. <li class= "Upone" ><a xhref= ". /menu/shadow_boxing.html " title=" Multi-position drop shadow " >shadow boxing</a>< span class= "tag" ></li>  
32. <li>< a xhref= ". /menu/old_master.html " title=" image map for detailed  Information ">image map for detailed information< /a></li >  
34. <li>< a xhref= ". /menu/bodies.html " title=" Fun with background images " >fun with background images</a ></li>  
36. <li>< a xhref= ". /menu/fade_scroll.html " title=" fade-out scrolling ">fade  scrolling</a></< Span class= "Tag-name" >li>  
38. <li><a xhref= ". /menu/em_images.html " title=" em size images compared ">em image sizes compared</a> </li>
40. </ul>
42. </td></tr></table>
44. <!–[if LTE IE 6]>
46. </a>
48. <! [endif]–>
50. </li>
52. <!–ie6 </a> Label when displayed –>
54. </ul>
56. </div>

Css

HTML code

2. <link rel="stylesheet" media="All" type="text/css" xhref= "Final_ Drop.css " />
4. <!--[If LTE IE 6]>
6. <link rel= "stylesheet" media= "all" type= "text/css" xhref= "final_drop_ie.css" />
8. <! [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

HTML code

1. . menu UL Li ul {
2. Display:none;
3. }
4. /* Specific to non IE browsers */
5. . Menu ul Li:hover a {
6. Color: #fff;
7. Background: #bd8d5e;
8. }
9. /* Define mouse over style */
10. . Menu UL Li:hover ul {
11. Display:block;
12. Position:absolute;
13. Top:3em;
14. margin-top:1px;
15. left:0;
16. width:150px;
17. }

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

HTML code

1. . menu ul li a:hover {
2. Color: #fff;
3. Background: #bd8d5e;
4. }
5. /* When the mouse is out of date, Li contains the UL display */
6. . menu ul Li A:hover ul {
7. Display:block;
8. Position:absolute;
9. Top:3em;
10. left:0;
11. Background: #fff;
12. margin-top:0;
13. marg\in-top:1px;
14. }

Inherit the above final_drop.css style, no mouse time when Li contains UL does not display
Because
<!--[If LTE IE 6]>
</a>
<! [endif]–>

CSS Conditional comments