CSS conditional comments_html/css_WEB-ITnose

Due to different browser versions, the interpretation of certain elements in CSS is also different. Different CSS codes are selected for different browser versions. In fact, we can also use conditional comments Methods to achieve similar purposes, what are conditional comments, let me briefly introduce it, it is nothing more than some if judgments, haha, but these judgments are not executed in the script, but directly executed in the html code. Let’s follow Let me introduce how to use it.

Here is the normal html code Here XXX is some specific stuff, Here are a few list to introduce their meanings in detail: / If the browser is IE / / If browsing The browser is IE 5/ / If the browser is IE 6/ / If the browser is IE 6 Version of IE 7/

The above are several commonly used syntaxes for judging the IE browser version. Next, let’s introduce the relatively less commonly used logical judgment parameters: How many are there? Parameters: lte, lt, gte, gt and! The detailed explanations of each are as follows: lte: is the abbreviation of Less than or equal to, which means less than or equal to. lt: It is the abbreviation of Less than, which means less than. gte: It is the abbreviation of Greater than or equal to, which means greater than or equal to. gt: It is the abbreviation of Greater than, which means greater than.

Example:

/ If IE version is greater than 5.5 / / If IE version is less than or equal to 6 / / If the browser is not IE /

I believe everyone has understood the usage of conditional comments after seeing this, OK , let’s give an example:

Defines what content is displayed in which browser. This dropmenu (drop-down menu) model comes from cssplay and was made after many studies and repeated tests by the author. I want to use this model to practice the principle of conditional annotation. Let’s look at the simplest model first The following is xhtml:

Html code

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

Html code

Use dual styles to define styles for ie and non-ie respectively. If it is IE, add a final_drop_ie based on final_drop.css. css Let’s first look at how css under non-ie is defined

Html code

.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; You can see that the ul contained in li is displayed when the mouse rolls over, because these browsers support li:hover usage css under IE Html code

.menu ul li a:hover {

color:#fff; background:#bd8d5e;

}

/* When the mouse rolls over, the ul contained in li is displayed */ 🎜>top:3em;

left:0; background:#fff; margin-top:0; ; } Inherit the final_drop.css style above, and the ul contained in li will not be displayed when there is no mouse time Because