IE hack [if IE] solves ie css compatibility issues

<! -[If lte IE 6]> "executed statement" <! [Endif]->

Ite: less than or equal to means less than or equal to IE6 browser. It is used for condition comments of IE browser and is often used for CSShack and JS for IE.

The following situations are not verified.

1. <! -[If! IE]> <! -> All except Internet Explorer can be recognized <! -<! [Endif]->
2. <! -[If IE]> all IE identifiable <! [Endif]->
3. <! -[If IE 5.0]> only IE5.0 can recognize <! [Endif]->
4. <! -[If IE 5]> only IE5.0 and IE5.5 can be recognized <! [Endif]->
5. <! -[If gt IE 5.0]> both IE5.0 and IE5.0 can be recognized <! [Endif]->
6. <! -[If IE 6]> only IE6 can recognize <! [Endif]->
7. <! -[If lt IE 6]> versions earlier than IE6 are recognizable <! [Endif]->
8. <! -[If gte IE 6]> IE6 and IE6 or later versions are recognizable <! [Endif]->
9. <! -[If IE 7]> only IE7 is recognizable <! [Endif]->
10. <! -[If lt IE 7]> versions earlier than IE7 are recognizable <! [Endif]->
11. <! -[If gte IE 7]> IE7 and IE7 versions can be recognized <! [Endif]->

In the process of learning and applying standard WEB pages, the compatibility of WEB pages with browsers is a common problem. Among them, Microsoft Internet Explorer (IE) occupies more than half of the browser market, in addition to Firefox and Opera. These browsers must be compatible.

At the same time, in the case of single IE, the upgrade of the IE version changes, the current browser is mainly used
IE5 (IE5.5), IE6, and IE7 versions. The three versions display different interpretations of the standard WEB page (XHTML + CSS. And
In addition, other non-IE browsers and IE have different interpretations of some CSS. Therefore, you can use the proprietary condition annotations in IE browser to define relevant attributes.

Condition annotations can only be used for Explorer 5 + Windows (IE) (condition annotations are supported from IE5 ). If you have installed Multiple IE, the Conditional comments will be based on IE of the highest version (IE 7 is currently used ).

Conditional annotations can only be used in windows Internet Explorer (IE). Therefore, you can add special commands for IE by using conditional annotations.

In layman's terms, condition comments are some if judgments, but these judgments are not executed in scripts, but directly executed in html code, such:

<! -- [If IE]>

Here is the normal html code

<! [Endif] -->

1. Basic Structure of condition annotations and HTML annotations (<! -->) Is the same. Therefore, browsers other than IE will regard them as common comments and ignore them completely.

2. IE will determine whether to parse the content in the condition comment just like the normal page content based on the if condition.

3. Conditional annotations use the HTML annotation structure. Therefore, they can only be used in HTML files, not CSS files.

You can use the following code to check the current version of IE (Note: it is ineffective in non-ie browsers)

<! -- [If IE]>

<H1> you are using IE

<! -- [If IE 5]>

<H2> Version 5

<! [Endif] -->

<! -- [If IE 5.0]>

<H2> Version 5.0

<! [Endif] -->

<! -- [If IE 5.5]>

<H2> Version 5.5

<! [Endif] -->

<! -- [If IE 6]>

<H2> Version 6

<! [Endif] -->

<! -- [If IE 7]>

<H2> Version 7

<! [Endif] -->

<! [Endif] -->

If the current browser is IE but the version is lower than IE5, what should I do? You can use it <! -- [If ls IE 5]>, of course, the condition annotation can only be in IE5 + environment, so <! -- [If ls IE 5]> is not executed at all.

Lte: Short for Less than or equal to, that is, 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 to, which is the same as the non-equal identifier in javascript.

Conditional comments belong to CSS hack? Does the condition determination belong to CSS hack?

Strictly speaking, it belongs to CSS hack. Because it's like other real css
Like hack, it allows us to assign special styles to Some browsers, and then it controls another browser (style) without relying on a browser BUG ). In addition, conditional judgment can be used.
Do something beyond the scope of css hack (although this rarely happens ).

Because conditional judgment does not rely on a browser's hack, it is a well-thought-out feature, so I believe it can be safely used. Of course, other browsers may also support conditional judgment (not available so far), but it seems that they should not use such as <! -- [If IE]> syntax.

How to Apply conditional comments

This article explains at the beginning, because browsers of different IE versions have different interpretations of the WEB standard pages we have created. Specifically, they have different interpretations of CSS. To be compatible with these, you can use condition annotations to define them separately to achieve compatibility. For example:

<! -- First use the css.css style sheet -->

<Link rel = "stylesheet" type = "text/css" href = "http://www.baidu.com/css.css"/>

<! -- [If IE 7]>

<! -- If the iebrowser version is "7", use the ie7.css style sheet. -->

<Link rel = "stylesheet" type = "text/css" href = "http://www.baidu.com/ie7.css"/>

<! [Endif] -->

<! -- [If lte IE 6]>

<! -- If the IE browser is smaller than or equal to 6, use the ie.css style sheet. -->

<Link rel = "stylesheet" type = "text/css" href = "http://www.baidu.com/ie.css"/>

<! [Endif] -->

This differentiates the implementation of CSS by IE7 and IE6 to achieve compatibility. At the same time, the first line of CSS is compatible with other non-ie browsers.

Note: The default CSS style should be located at the first line of the HTML document. All the content for condition annotation judgment must be located after the default style.

For example, if the following code is executed in IE, it is displayed in red, but not in IE. If the condition annotation judgment is placed on the first line, it cannot be implemented. This example shows how to solve the compatibility problem between the web browser and the Internet Explorer.

<Style type = "text/css">

Body {

Background-color: #000;

}

</Style>

<! -- [If IE]>

<Style type = "text/css">

Body {

Background-color: # F00;

}

</Style>

<! [Endif] -->

At the same time, someone will try to use <! -- [If! IE]> to define non-IE browser conditions, but note: Condition comments can only be executed in IE browser. This code is not executed in non-IE browser, but not in non-IE browser, it turns a blind eye to it as a comment.

Normally, it is the default style. If the IE browser needs special processing, it must be annotated with the conditions.

HTML files, but not CSS files.