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

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>