Compatible with antique-grade IE summary

IE6 has died, of course 7,8,9,10 also hung off. Microsoft to IE11 more ruthless hand, to it stopped the update. Think the front-end can be settle down to write code. But is some stubborn molecule, unexpectedly use or IE6, respect customer supreme principle, disgusting to him to be compatible with antique.

IE conditional comments, Microsoft's official recommended hack way

1 <!--[If ie]> this text is only displayed on IE browser <! [EndIf] -2 <!--[If IE 6]> this text is only displayed on IE6 browser <! [EndIf] -3 <!--[If GT ie 6]> this text only appears on IE6 above version of IE browser <! [EndIf] -4 <!--[if! IE 7]> This text is displayed on a non-IE7 browser <! [EndIf] -5 <!--[if! ie]><! -This text is only displayed on non-IE browsers!--<![endif]-->

Google's Ie7–js, which is a JavaScript library (the JS library that solves the conflict between IE and the Internet standard), makes Microsoft's Internet Explorer behave like a web-compliant browser, supporting more standards, supporting CSS2, CSS3 Selector. It fixes a number of HTML and CSS issues and makes transparent PNG appear correctly in IE5, IE6.

Make IE5,IE6 compatible to IE7 mode (recommended)

<! –[if Lt IE 7] > <  srchttp://ie7-js.googlecode.com/svn/version/2.0 (Beta)/ie7.js "></  script><! [endif]– >

The following two are not recommended, I have a problem in the browser

1. Make IE5,IE6,IE7 compatible to IE8 mode

<!–[if lt IE 8]><script src= " http://ie7-js.googlecode.com/svn/version/2.0 (Beta)/ie8.js " ></ script><! [endif]–>

2. Make IE5,IE6,IE7,IE8 compatible to IE9 mode

<!–[if lt IE 9]><script src= " http://ie7-js.googlecode.com/svn/version/2.1 (beta4)/ie9.js " >< /script><! [endif]–>

Document Mode rendering

1. Force the use of IE5 mode to parse

<meta http-equiv= "x-ua-compatible" content= "ie=5″>

2. Force the use of IE6 mode to parse

<meta http-equiv= "x-ua-compatible" content= "ie=6″>

3. Forcing the use of IE7 mode to parse two ways

<meta http-equiv= "x-ua-compatible" content= "ie=emulateie7″>

<meta http-equiv= "x-ua-compatible" content= "ie=7″>

4. Force the use of IE8 mode to parse

<meta http-equiv= "x-ua-compatible" content= "ie=8″>

5. Google Chrome frame also allows IE to use Chrome's engine:

<meta http-equiv= "x-ua-compatible" content= "chrome=1″/>

6. If a specific version of IE support requires more than one compatibility mode, the following code is IE5 and IE8 two modes:

<meta http-equiv= "x-ua-compatible" content= "ie=5; Ie=8″/>

7. Use GCF to render pages

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1″/>

If a GCF (Google Chrome frame Google embedded browser frame is installed, the page is rendered using GCF, and if the GCF is not installed, the highest version of the IE kernel is used for rendering. This plugin can keep the user's IE browser intact, but when users are browsing the web, they are actually using the Google Chrome kernel, and support IE6, 7, 8 and many other versions of IE browser.

Compatibility tips for IE6 support Max-width,min-width

IE does not min-this definition, in fact it treats the normal width and height as a condition of min. If only the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the below is basically not set width and height.
For example, to set the background image, its width is very important:
#box {width:80px; height:35px;}

Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}

In early IE, you can write a similar JS code in the CSS to be compatible with IE6

. Sector {max-width:500px; _width:expression ((documentelement.clientwidth>500)? " 500px ":" Auto "); min-width:300px; _width:expression ((documentelement.clientwidth<300)? " 300px ":" Auto ");}

Universal Float closure

Believe this hask everyone is not unfamiliar, to need to close div plus class= "clearfix" can.

1 /*Clear Fix*/2 . Clearfix:after{3 content:".";4 Display:Block;5 Height:0;6 Clear:both;7 Visibility:Hidden;8}9 Ten . Clearfix{ One Display:Inline-block; A} -  -   the /*Hide from IE Mac*/ - . Clearfix{Display:Block;} - /*End Hide from IE Mac*/ - /*End of Clearfix*/

Display problems for Ie6png

Just name the transparent PNG image *-trans.png, but this method does nothing for the background tiling (background-repeat) and background (background-position), which fills the entire container by default.

Marging and padding caused a high degree of non-adaptation

FF setting padding after the div will cause width and height to increase, but IE will not. (with!important resolution, with IE7 support for!important, the!important method now only targets IE6 hack.) )。 Height intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign. Cases:

<div id= the contents of the "box" ><p>p object </p> </div>

CSS: #box {background-color: #eee;} #box p {margin-top:20px;margin-bottom:20px; text-align:center;}

Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

Center the problem.

1). Center vertically. Set Line-height to the same height as the current Div, and then through Vertical-align:middle. (Note that the content does not wrap.)
2). Center horizontally. margin:0 Auto; (of course not everything)

Double distance generated by floating ie

#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Here Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line, uncontrollable (inline elements);

Div floating IE text generates 3 pixel bug

The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left.
#box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is the key}
HTML code <div id= "box" > <div id= "left" ></div><div id= ' right ' ></div></div>

Standard mode and quirks mode box model:

Standard mode: Element width = width + padding + border

Weird mode: Element width = width

IE6 under certain circumstances line-height invalid

When the text in a container is connected to an IMG, input, textarea, select, object and other elements, the Line-height value set on the container will be invalidated and the row height of the above element may X2.

Workaround:
An IMG, input, textarea, select, object, and other elements that are connected to text are attributes:
{margin: (belongs to line-height-itself img,input,select,object height)/2px 0;vertical-align:middle;}

Other

1, if you need to give the contents of a tag style, you need to set display:block; (common in navigation labels)
2, UL label under FF The default is List-style and padding. It is advisable to declare beforehand to avoid unnecessary trouble. (Common in navigation labels and table of contents)
3, as an external wrapper div do not set dead height, it is best to add Overflow:hidden. To achieve a high degree of self-adaptation.

4, button in IE7 and earlier browser with value increase on both sides of the white also with increasing problems. Workaround: input,button{overflow:visible;}

5,button reset CSS style compatible with IE6,IE7, you need to setoverflow:visible

A small height cannot be defined under 6,IE6:1px. Because you have row heights by default, add line-height: You can

Compatible with antique-grade IE summary