Using HTML to judge IE versions

Source: Internet
Author: User
Tags first row

Through HTML to judge IE version, the purpose is to be in a particular version of IE, the implementation of a specific JS or CSS Hack,ie version, the current most tragic version is IE6.

In the process of learning and applying Web standard Web pages, the compatibility of Web pages to browsers is a problem that is often contacted. Because Microsoft's Internet Explorer (IE) occupy the majority of the browser market, in addition to Firefox, opera and so on. These browsers need to be compatible.

At the same time, in terms of IE, as a result of the upgrade of IE version of the replacement, the current visitors to use the main IE5 (IE5.5), IE6 and IE7 of the three versions. The 3 versions of the Web Standard Web page (XHTML+CSS) that we make are not as good as they appear. Also, other non-ie browsers and IE have different explanations for some CSS. Therefore, through the proprietary conditions in IE browser annotation can be targeted to the definition of related properties.

Conditional comments can only be used for explorer 5+ Windows (IE) (conditional comments are supported from IE5). If you have more than one IE installed, the conditional annotation (Conditional comments) will be the highest version of IE (currently IE 7).

Conditional comments can only be used under Windows Internet Explorer (IE), so we can add special instructions to IE with conditional comments.

Popular point, conditional annotation is some if judgment, but these judgments do not execute in the script, but are executed directly in the HTML code.

Let's see how these codes are judged and how they are written.
<!--[if! ie]><!--> can recognize <!--<! except IE [endif]-->
<!--[if ie]> all IE identifiable <! [endif]-->
<!--[if IE 5.0]> only IE5.0 can identify <! [endif]-->
<!--[if IE 5]> only IE5.0 and IE5.5 can be identified <! [endif]-->
<!--[if GT IE 5.0]> IE5.0 and IE5.0 versions can be identified <! [endif]-->
<!--[if IE 6]> only IE6 identifiable <! [endif]-->
<!--[if Lt IE 6]> IE6 The following version can be identified <! [endif]-->
<!--[If LTE IE 6]> IE6 and IE6 The following versions can be identified <! [endif]-->
<!--[if GTE IE 6]> IE6 and IE6 above versions can be identified <! [endif]-->
<!--[if IE 7]> only IE7 identifiable <! [endif]-->
<!--[if Lt IE 7]> IE7 The following version can be identified <! [endif]-->
<!--[If LTE IE 7]> IE7 and IE7 The following versions can be identified <! [endif]-->
<!--[if GTE IE 7]> IE7 and IE7 above versions can be identified <! [endif]-->

<!--[If LTE IE 6]>......<! [endif]-->
Ite:less than or equal to meaning is less than or equal to the IE6 browser, used for IE browser condition annotation, commonly used in csshack, for IE JS and so on.

1, the basic structure of the conditional annotation and the HTML annotation (<!---->) are the same. Browsers other than IE will therefore look at them as normal annotations and ignore them entirely.

2,ie will determine whether the contents of the conditional annotation are parsed as if the normal page content is parsed according to the IF condition.

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

You can use the following code to detect the version of the current IE browser (note: No effect is visible in non IE browsers)
<!--[If ie]>
<!--[if IE 5]>
<! [endif]-->

<!--[if IE 5.0]>
<! [endif]-->

<!--[if IE 5.5]>
<! [endif]-->

<!--[if IE 6]>
<! [endif]-->

<!--[if IE 7]>
<! [endif]-->
<! [endif]-->

If the current browser is IE, but the version is lower than IE5, you can use the <!--[if LS ie 5]>, of course, according to the conditional annotation can only be under the ie5+ environment, so <!--[if LS ie 5]> will not be executed at all.

LTE: Is the shorthand for less than or equal to, meaning less than or equal to.

LT: It is the shorthand for less than, which means less than.

GTE: is the shorthand for greater than or equal to, which is greater than or equal to the meaning.

GT: is the shorthand for greater than, which means greater than.

! : Is not equal to the meaning, and JavaScript is not equal to the same judge character.

Conditional comments belong to CSS hack? The conditional judgment belongs to the CSS hack.

Strictly speaking, it belongs to CSS hack. Because, like other real CSS hack, it allows us to give some browsers special styles, plus it doesn't rely on a browser bug to control another browser's style. In addition, conditional judgments can be used to do things that are beyond the scope of the CSS hack (though this rarely happens).

Because conditional judgment does not depend on the hack of a browser, it is a thoughtful feature, so I believe it can be used safely. Of course, other browsers may also be able to support conditional judgments (not so far), but it seems that they should not use syntax such as <!--[if ie]>.

How conditional comments should be applied

This article explained at the outset, because IE each version of the browser to our web Standard page interpretation is not the same, specifically to the CSS interpretation of different, we in order to compatible with these, we can use conditional annotation to define, and ultimately achieve compatibility purposes. Like what:
<!--call the CSS.CSS style sheet by default first-->
<link rel= "stylesheet" type= "Text/css" href= "css.css" />

<!--[if IE 7]>
<!--if the IE browser version is 7, call IE7.CSS style sheet-->
<link rel= "stylesheet" type= "Text/css" href= "ie7.css" />
<! [endif]-->

<!--[If LTE IE 6]>
<!--if IE browser version is less than or equal to 6, call IE.CSS style sheet-->
<link rel= "stylesheet" type= "Text/css" href= "ie.css" />
<! [endif]-->

This distinguishes the IE7 and IE6 down browsers from the implementation of CSS to achieve compatibility. At the same time, the default css.css of the first line can also be compatible with other non IE browsers.

Note: The default CSS style should be in the first row of the HTML document, and all content judged by the conditional annotation must be in the default style.

For example, the following code, in IE browser execution is displayed in red, and in non-IE browser display as black. If you put a conditional comment on the first line, you cannot implement it. This example can explain the Web page to the Internet Explorer and non-IE browser compatibility problem resolution.
<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 the <!--[if! Ie]> to define the situation in non-ie browsers, but note that conditional annotations can only be performed under IE, which is not a single definition of the condition under IE, but a blind eye to annotations.

Normal is the default style, for IE browser needs special treatment, only to make conditional comments.

In an HTML file, but not in a CSS file.

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.