IE browser compatibility (I)-compatible html and css writing

IE browser compatibility (I)-compatible html and css writing

Users use a wide variety of browsers. To ensure that every browser is compatible with our code and cannot require users to change the browser, we have to work hard on our code. Now we need to use hack.

HACK is to write different HTML and CSS styles for different browsers, so that various browsers can achieve consistent rendering effect.

Next, let's take a look at the HTML hack and CSS hack respectively.

(1). HTML hack

Hack of HTML by comment <! --> Evolved, annotations won't be loaded in advanced browsers, and compatible code of IE is written in comments, which will be recognized by IE.

HTML hack code template:

Note:

① Used to write compatible comments. Add the first part in the tag! Exclamation point.

② All words are written in a pair of brackets

③ Spaces must be added between IE and version.

④ If no comparison word is added, the version is only compatible;

Comparison words: lt = less than (less than), lte = less than or equal (less than or equal to), gt = great than (greater than), gte = great than or equal (greater than or equal)

<! -- [If IE 6]> <p> only IE6 knows me </p> <! [Endif] -->

As long as you remember this template, you will know how to write HTML compatibility. Below are a few examples:

<! -- [If gte IE 9]> 
<! -- [If lte IE 8]> 

HTML code for solving compatibility issues separately written to IE6: <! -- [If IE 6]> <script src = "js/iepng. js "type =" text/javascript "> </script> <script type =" text/javascript "> EvPNG. fix ('div, ul, img, li, input, span, B, h1, h2, h3, h4 '); </script> <! [Endif] -->
 
(2) CSS hack
CSS hack includes: attribute hack and Selector hack
When setting the hack of css, pay attention to the cascading of css styles. The compatible writing method set for the same element must be written later. Otherwise, it will be stacked.
(1) attribute hack
① Only hack compatible with IE6
Hack character:-or _. It is written before the attribute as a prefix without spaces in the middle.
Add a short horizontal or underline _ (Principle: Advanced browsers and other browsers will regard this prefix as an unknown property name) before the attribute name. unknown attribute names will not report errors, not loaded.
Example:
Background: red; // advanced browser identification _ background: pink; // IE6 only

 
② Hack compatible with IE6 and 7
Hack :'~ ! @ # $ % ^ & * () + = [] | <>, Any character in., before the attribute as the prefix
Example:
Background: red; // advanced browser recognition! Background: pink; // only IE6 and 7 Identification
 
③ Only hack compatible with IE8
Hack: \ 0/, must be written between the attribute value and the semicolon without spaces in the middle
Background: red; // advanced browser identification background: pink \ 0/; // only IE8 Recognition
 
④ Hack compatible with IE8, 9, and 10
Hack: \ 0. It must be written between the attribute value and the semicolon without spaces in the middle.
Background: red; // advanced browser identification background: pink \ 0; // IE8, 9, and 10
 
⑤ Compatible with IE6, 7, 8, 9, and 10
Hack: \ 9, must be written between the attribute value and the semicolon without spaces in the middle
 
(2) the hack of the selector
Add hack to the selector. All styles in this selector are IE-compatible styles, which are not recognized by other advanced browsers. Similarly, the compatible styles set for the same selector must be written after the standard styles that can be recognized by advanced browsers, otherwise it will be stacked
① IE6 and earlier versions of hack
Hack character: * There is a space between html, * and html, plus a space, followed by a write Selector
Example:
<! -- General writing -->
. Box {width: 200px; height: 200px; border-radius: 50%; background: yellowgreen ;}
<! -- Compatible writing --> * html. box {width: 100px; height: 100px; background: skyblue ;}
 
② IE7 and earlier versions of hack
Hack character: an English comma (,). It is written after the selector without spaces.
Example:
.box,{    background: #999;    border: 10px solid red;
 
③ Hack compatible with versions other than IE6
Hack character: html> body, written in front of the selector, separated by a space
Example:
html>body .box{    background: yellow;}
 
④ Hack compatible with versions other than IE6 and 7
Hack: html>/**/or html ~ /**/, Written in front of the selector, separated by a space
Example:
html>/**/body .box{    background: purple;}