CSS conditional annotation theory and Practice Source Document _ Experience Exchange

Source: Internet
Author: User
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
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.