How to Make CSS run normally in different browsers-use conditional comments

Due to the different browser versions, the interpretation of some elements in CSS is not the same. Of course, the experts also encountered the same problem and collected some solutions, before that, I posted two codes for choosing different CSS based on different browser versions. If you are interested, look for them.
In fact, we can also use the condition annotation method to achieve a similar goal. What is the condition annotation? Here, I would like to briefly introduce it. It is nothing more than if judgment, however, these judgments are not executed in scripts, but directly executed in HTML code. The following describes how to use them.

Program code <! -- [If XXX]>
Here is the normal HTML code
<! [Endif] -->
Here XXX is a few specific things. Here we will detail their meanings:
<! -- [If IE]>/If the browser is IE/
<! -- [If IE 5]>/If the browser version is ie 5/
<! -- [If IE 6]>/If the browser version is IE 6/
<! -- [If IE 7]>/If the browser version is IE 7/
......

The above are several commonly used syntax used to determine the version of IE browser. Next we will introduce the few logical judgment parameters:
There are several parameters: LTE, LT, GTE, GT, and!
The detailed explanations are as follows:

Reference content: Short for less than or equal to, which means less than or equal.
LT: Short for less than, that is, less.
GTE: Short for greater than or equal to, that is, greater than or equal.
GT: Short for greater than, that is, greater.
! : It means not equal. It is the same as the non-equal identifier in Javascript, ^ 0 ^
Write a few additional statements: reference content <! -- [If gt ie 5.5]>/If the IE version is later than 5.5/
<! -- [If lte ie 6]>/If the IE version is less than or equal to 6/
<! -- [If! IE]>/If the browser is not IE/
......

I believe that everyone understands the usage of conditional comments. OK. Here is an example: reference content <! -- First use the css.css style sheet -->
<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>
<! -- [If! IE]>
<! -- Use the 1.css style sheet for non-ie-based access -->
<LINK rel = "stylesheet" type = "text/CSS" href = "1.css"/>
<! [Endif] -->
<! -- [If lt IE 6]>
<! -- If the IE browser is less than 6, use the 2.css style sheet -->
<LINK rel = "stylesheet" type = "text/CSS" href = "2.css"/>
<! [Endif] -->

The detailed usage has been described. One point that must be mentioned is:
Conditional comments are supported by IE only after ie5.0/win, which is invalid for browsers earlier than ie5. However, no one is using ie4. ^ 0 ^

The browser's condition annotation theory is explained in the following example.
(X) HTML
The following code is used to test the effect of the condition comment statement in Microsoft's IE browser.

HTML code <! -- [If IE]> <br/> <p> you are using IE </p> <br/> <! [Endif] --> <br/> <! -- [If IE 5]> <br/> <p> Version 5 </p> <br/> <! [Endif] --> <br/> <! -- [If IE 5.0]> <br/> <p> Version 5.0 </p> <br/> <! [Endif] --> <br/> <! -- [If IE 5.5]> <br/> <p> Version 5.5 </p> <br/> <! [Endif] --> <br/> <! -- [If IE 6]> <br/> <p> Version 6 </p> <br/> <! [Endif] --> <br/> <! -- [If IE 7]> <br/> <p> Version 7 </p> <br/> <! [Endif] -->

[Ctrl + A select all tips: you can modify some code and then press run]

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

HTML code <! -- [If! IE]> <! --> <Br/> <p> you are not using Internet Explorer </p> <br/> <! -- <! [Endif] -->

[Ctrl + A select all tips: you can modify some code and then press run]

It eventually works in non-ie and special ie browsers
(Or use LTE lt or gt gte to determine, for example:

HTML code <! -- [If lte ie 6]> <br/> information displayed under IE 6 <br/> <! [Endif] --> <br/>). <br/> <! -- [If IE 6]> <! --> <Br/> <p> you are using Internet Explorer version 6 <br/> or a non-IE browser </p> <br/> <! -- <! [Endif] -->

[Ctrl + A select all tips: you can modify some code and then press run]

From: http://www.cssplay.co.uk/menu/conditional.html
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 from cssplay, which is made after many researches and repeated tests by the author. I want to use this model to illustrate the principle of conditional annotation.
First look at a simple model
Below is the XHTML

Reference content <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] -->
Bytes
First, let's see 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.