browser's conditional annotation theory, use the following example to explain this problem
X Html
The following code is a test of the effect of a conditional comment statement in Microsoft's IE browser
<!--[If ie]>
<! [endif]-->
<!--[if IE 5]>
<! [endif]-->
<!--[if IE 5.0]>
<! [endif]-->
<!--[if IE 5.5]>
<! [endif]-->
<!--[if IE 6]>
<! [endif]-->
<!--[if IE 7]>
<! [endif]-->
The following code is a conditional comment that runs in non-IE browsers
<!--[if! ie]><!-->
<!--<! [endif]-->
Ultimately works in non IE and special IE browsers
(or use the LTE LT or GT GTE to determine, such as:
<!--[If LTE IE 6]>
Information displayed under IE 6
<! [endif]-->
).
<!--[if IE 6]><!-->
or a non IE browser <!--<! [endif]-->
from:cssplay.co.uk/menu/conditional.html "target=" _blank ">http://www.cssplay.co.uk/menu/conditional.html
The above mentioned conditional annotation, which is to judge the browser type, and then to define what browser to display what content.
The Dropmenu (Pull-down menu) model is derived from Cssplay, which is made by the author's numerous studies and repeated tests. I think that this model to practice the principle of conditional annotation.
Let's look at one of the simplest models.
Here's xhtm.
<div class= "Menu" >
<ul>
<li><a class= "Drop" href= ". /menu/index.html ">demos
<!--[if IE 7]><!-->
</a>
<!--<! [endif]-->
< display </a> Label--> when!--IE7
<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=" fun with 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>
< display </a> Label--> when!--IE6
</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 double style, give IE and non ie respectively define style, if IE time, add a final_drop_ie.css on FINAL_DROP.CSS Foundation
First look at the non-ie CSS is how to define
. 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 non ie, see the mouse when the slide over 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 sliding outdated Li contains the UL show * *
. menu ul Li A:hover ul
Display:block;
Position:absolute;
Top:3em;
left:0;
Background: #fff;
margin-top:0;
marg\in-top:1px;
}
Inheritance above the final_drop.css style, no mouse time when Li contains UL does not show
Because
<!--[If LTE IE 6]>
</a>
<! [endif]-->
So in the IE6 under the mouse over the time in the a:hover to show that the UL content
And IE7 under the Li:hover show the same effect
