CSS conditional annotation theory and Practice Source Document _ Experience Exchange

Browser conditional annotation theory, using the following example to explain the problem

X Html

The following section of code is the effect of testing conditional comment statements under Microsoft's IE browser








The following code is a conditional comment that runs under a non-IE browser

You are not using Internet Explorer

Ultimately works in non-IE and special IE browsers
(or use LTE LT or GT GTE to judge, such as:

).

You are using Internet Explorer version 6

or a non-IE browser

from:cssplay.co.uk/menu/conditional.html "target=" _blank ">http://www.cssplay.co.uk/menu/conditional.html

The above mentioned conditional comments, that is, to determine the browser type, and then define what browser to display 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's xhtm.

• DEMOS
  
  
  
  
  

  Zero Dollars Advertising Page Wrapping text around images Styled form Active focus Hover/click with no borders Shadow Boxing Image map for detailed information Fun with background images Fade scrolling EM image sizes compared

  
  
  
  

Css



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

So when the mouse IE6 under the time of the a:hover to display the UL content
And IE7 under the Li:hover show the same effect

