The browser's condition annotation theory is explained in the following example.

The browser's condition annotation theory is explained in the following example.

(X) HTML

The following sectionCodeIs to test the effect of the conditional comment statement in Microsoft's IE browser:

<! -- [If IE]>
<H1> you are using IE <! [Endif] -->
<! -- [If IE 5]>
<H1> Version 5 <! [Endif] -->
<! -- [If IE 5.0]>
<H1> Version 5.0 <! [Endif] -->
<! -- [If IE 5.5]>
<H1> Version 5.5 <! [Endif] -->
<! -- [If IE 6]>
<H1> Version 6 <! [Endif] -->
<! -- [If IE 7]>
<H1> Version 7 <! [Endif] -->

The following code is a condition comment for running in a non-IE browser:

<! -- [If! IE]> <! -->
<H1> you are not using Internet Explorer <! -- <! [Endif] -->
It eventually works in non-ie and special ie browsers
(Or use LTE lt or gt gte to determine, for example:
<! -- [If lte ie 6]>
Information displayed in IE 6
<! [Endif] -->
).

<! -- [If IE 6]> <! -->
<H1> you are using Internet Explorer version 6 <br/>
Or a non-IE browser <! -- <! [Endif] -->

From:Http://www.cssplay.co.uk/menu/conditional.html

Conditional annotations are supported by IE only after ie5.0/win, and are generally used for hack.
(X) HTML
The following code is used to test the effect of the condition comment statement in Microsoft's IE browser.

<! -- [If IE]>
This is Internet Explorer based on conditions. <br/>
<! [Endif] -->
<! -- [If IE 5]>
This is Internet Explorer 5 based on conditions. <br/>
<! [Endif] -->
<! -- [If IE 5.0]>
According to the condition, this is Internet Explorer 5.0 <br/>
<! [Endif] -->
<! -- [If IE 5.5]>
According to the condition, this is Internet Explorer 5.5 <br/>
<! [Endif] -->
<! -- [If IE 6]>
According to the condition, this is Internet Explorer 6 <br/>
<! [Endif] -->
<! -- [If IE 7]>
According to the condition, this is Internet Explorer 7 <br/>
<! [Endif] -->
<! -- [If GTE ie 5]>
Based on the condition, this is Internet Explorer 5 or higher <br/>
<! [Endif] -->
<! -- [If lt IE 6]>
Based on the condition, this is an Internet Explorer version earlier than 6 <br/>
<! [Endif] -->
<! -- [If lte ie 5.5]>
Based on the condition, this is Internet Explorer 5.5 or lower <br/>
<! [Endif] -->

The following code is a condition comment for running in a non-IE browser

<! -- [If! IE]> <! -->
You are not using Internet Explorer <br/>
<! -- <! [Endif] -->
<! -- [If IE 6]> <! -->
You are using Internet Explorer version 6 <br/>
Or a non-IE browser <br/>
<! -- <! [Endif] -->

The syntax for conditional annotation is as follows:

[LIST]
[*] GT/greater than/<! -- [If gt ie 5.5]>
[*] GTE/greater than or equal to/<! -- [If gte ie 5.5]>
[*] Lt/less than/<! -- [If lt ie5.5]>
[*] LTE/less than or equal to/<! -- [If lte ie 5.5]>
[*]! /Note/not equal to/<! -- [If! Internet Explorer 5.5]>
[/LIST]

The excellent ability to differentiate browsers with IE condition annotations enables many designers to use hack to resolve CSS differences in browsers.

<! -- [If ie6.0]
<Style type = "text/CSS">
Div # box {width: 500px; margin: 10px; padding: 10px; Border: 10px ;}
</Style>
<! [Endif] -->
<! -- [If lt ie6.0]
<Style type = "text/CSS">
Div # box {width: 530px; margin: 10px; padding: 10px; Border: 10px ;}
</Style>

Preview Model

The condition annotation mentioned above is to determine the browser type and then define what content is displayed under the browser.

This dropmenu (drop-down menu) model comes fromCssplaySo that it can be done after several studies and repeated tests by the author. I want to use this model to illustrate the principle of conditional annotation.

First read oneSimplest Model

Below is the xhtm

<Div class = "menu">
<Ul>
<Li> <a class = "Drop" href = "../menu/index.html"> demos
<! -- [If IE 7]> <! -->
</A>
<! -- <! [Endif] -->
<! -- Display in IE7 </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 = "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 when IE6 </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] -->

.

First, let's take a look at how CSS is defined in non-ie:

. Menu ul Li ul {
Display: none;
}
/* Specific to non ie browsers */
. Menu ul Li: hover {
Color: # FFF;
Background: # bd8d5e;
}
/* Define the mouse over style */
. Menu ul Li: hover ul {
Display: block;
Position: absolute;
Top: 3em;
Margin-top: 1px;
Left: 0;
Width: 150px;
}

In non-ie mode, the UL contained in Li is displayed when the mouse slides over, because these browsers support Li: hover usage.

CSS in IE:

. Menu ul Li A: hover {
Color: # FFF;
Background: # bd8d5e;
}
/* Ul display included in Li when the mouse slides */
. Menu ul Li A: hover ul {
Display: block;
Position: absolute;
Top: 3em;
Left: 0;
Background: # FFF;
Margin-top: 0;
Marg \ In-top: 1px;
}

The final_drop.css style of the inheritance class. When there is no mouse time, the UL contained by Li is not displayed.
Because
<! -- [If lte ie 6]>
</A>
<! [Endif] -->
So when the mouse slides over IE6, A: hover is used to display the UL content.
In IE7, Li: hover shows the same effect.

Below is the original model of the author (three levels of menu vertical and combined)
It is complicated on the basis of a simple model.

Preview Model

Download related files:Click to download