Css condition annotation theory and practice source file _ experience exchange

Source: Internet
Author: User
Css condition annotation theory and practice source file browser condition annotation theory. The following example is used to explain this problem.

(X) HTML

The following code is used to test the effect of the condition comment statement in Microsoft's IE browser.








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


You are not using Internet Explorer

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

).


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 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 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



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

So when the mouse slides over IE6, a: hover is used to display the ul content.
In IE7, li: hover shows the same effect.

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.