Determine the IE version in HTML and CSS and implement the corresponding HTML and CSS, cssie

Source: Internet
Author: User

Determine the IE version in HTML and CSS and implement the corresponding HTML and CSS, cssie

When writing webpage code, compatibility of various browsers is an issue that must be considered. Sometimes it is impossible to find a suitable method for all browsers, so you can only write code based on different browser types, now we need to use the judgment code.


1. HTML code

After self-testing, the code for distinguishing various browsers in HTML code is as follows:

<! -- [If IE 6]> only IE6 is supported <! [Endif] --> <! -- [If lte IE 6]> supports IE5 and IE6 <! [Endif] --> <! -- [If lt IE 6]> supports IE5 <! [Endif] --> <! -- [If gte IE 6]> IE6-IE9 supported <! [Endif] --> <! -- [If gt IE 6]> IE7-IE9 supported <! [Endif] --> <! -- [If IE]> IE5-IE9 supported <! [Endif] --> <! -- [If! IE]> <! --> Supports IE9 + and other browsers <! -- <! [Endif] -->

Principle: For browsers of different versions, these codes are interpreted as Html comments and directly ignored.


2. CSS code

In CSS code, you can write code that distinguishes browsers based on the special code that each browser can recognize independently. For example, for IE browsers, you can read [\ 9]. IE6 and IE7 can read [*], and IE6 can recognize [_] (underline );
When CSS is read, it is written from top to bottom, and the same attribute is written to the back to take effect. Therefore, you can write it down in order so that each browser can read the correct CSS syntax, effective differentiation of various types or versions:

<Style type = "text/css"> # element {width: 300px; height: 100px; }# element {background: blue;/* IE9 and later, firefox and other non-IE browser backgrounds are blue. If you delete subsequent styles, the blue background */background: red \ 9;/* IE8 background red */* background: black; /* The IE7 background is black. If you delete this line and the next line of style, red */_ background: orange is displayed under IE8;/* IE5 and IE6 backgrounds are orange; if you delete this line of style, IE7 or lower will also display a black background */} # element {/* other browsers can read 「! Important; "but IE6 or below does not work */border: 5px solid green! Important;/* Non-IE6 border green */border: 5px solid yellow;/* IE5, IE6 border yellow */} </style>

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