Compatible with antique IE summary and antique ie Summary

Compatible with antique IE summary and antique ie Summary

IE6 has been killed. Of course, 7, 8, 9, and 10 are also suspended. Microsoft has made another effort to stop updating IE11. I thought the front-end could write the code with peace of mind. However, some stubborn elements still use IE6 and respect the principle of "customer first", so they are disgusted with providing him with old antiques.

Internet Explorer condition comments, the hack method officially recommended by Microsoft

1 <! -- [If IE]> This text is only displayed in IE browser <! [Endif] --> 2 <! -- [If IE 6]> This text is only displayed in the IE 6 browser <! [Endif] --> 3 <! -- [If gt IE 6]> This text is only displayed in IE 6 or later versions. <! [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 is a JavaScript Library (a JS library that resolves conflicts between IE and W3C standards), making Microsoft's Internet Explorer act like a Web standard compatible browser, supports more W3C standards and CSS2 and CSS3 selectors. It fixes many HTML and CSS problems and makes transparent PNG correctly displayed under IE5 and IE6.

Make IE5 and IE6 compatible to IE7 mode (recommended)

<!–[if lt IE 7]><script src=” http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js ”></script><![endif]–>

The following two are not recommended. I encountered a problem in the browser.

1. Make IE5, IE6, and IE7 compatible with 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, and 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 use of IE5 mode for parsing

<Meta http-equiv = "X-UA-Compatible" content = "IE = 5">

 

2. force Internet Explorer 6 Mode for parsing

<Meta http-equiv = "X-UA-Compatible" content = "IE = 6">

 

3. Two Ways to force Internet Explorer 7 Resolution

<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7">

<Meta http-equiv = "X-UA-Compatible" content = "IE = 7">

 

4. force Internet Explorer 8 Mode for parsing

<Meta http-equiv = "X-UA-Compatible" content = "IE = 8">

 

5. Google Chrome Frame can also enable IE to use Chrome's engine:

<Meta http-equiv = "X-UA-Compatible" content = "chrome = 1"/>

 

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

<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 GCF is installed (Google Chrome Frame Google embedded browser framework, use GCF to render the page. If GCF is not installed, use the highest version of IE kernel for rendering. This plug-in can keep your IE browser unchanged. However, when you browse the Web page, you actually use the Google Chrome browser kernel and support multiple Internet Explorer versions such as IE6, 7, and 8.

Compatibility tips: IE6 supports max-width and min-width

IE does not have the min-definition. In fact, it treats normal width and height as min conditions. If only the width and height are used, the values in the normal browser will not change. If only min-width and min-height are used, the width and height under IE are not set at all.
For example, to set a background image, the width is very important:
# Box {width: 80px; height: 35px ;}

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

In earlier versions of IE, JavaScript code like can be written in 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

I believe this hask is familiar to everyone. Just add class = "clearfix" to the div to be closed.

 1 /* Clear Fix */ 2 .clearfix:after{ 3     content:"."; 4     display:block; 5     height:0; 6     clear:both; 7     visibility:hidden; 8 } 9 10 .clearfix{11     display:inline-block;12 }13 14  15 /* Hide from IE Mac */16 .clearfix {display:block;}17 /* End hide from IE Mac */18 /* end of clearfix */

Display IE6PNG Problems

You only need to name the transparent png image as * -trans.png, but this method does not work for background-repeat and background-position. By default, the entire container is fully occupied.

Marging and padding cause height discomfort

Setting padding for div under FF will increase the width and height, but IE will not. (available! Important solution, with IE7! Important Support ,! The important method is only applicable to the HACK of ie6 .). Height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses margin or paddign. Example:

<Div id = "box"> <p> content in the p object </p> </div>

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

Solution: Add two empty div objects to the upper and lower sides of the P object. CSS code:. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV.

Center problem.

1). vertical center. Set line-height to the same height of the current div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. margin: 0 auto; (of course not omnipotent)

Double distance of floating ie

# Box {float: left; width: 100px; margin: 0 0 0 100px; // in this case, IE will generate a PX distance display: inline; // ignore floating}
Here, let's take a closer look at the block and inline elements. The characteristics of the Block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); inline elements are not controllable (embedded element) on the same line as other elements );

DIV floating IE text produces 3 pixel bug

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px 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 critical}
HTML code <div id = "box"> <div id = "left"> </div> <div id = "right"> </div>

Standard mode and weird mode box model:

In standard mode: Element width = width + padding + border

Element width = width in weird Mode

In IE6, line-height is invalid.

When the text in a container is connected to elements such as img, input, textarea, select, and object, the line-height value set for the container is invalid; at the same time, the Row Height of the above elements may be × 2.

Solution:
Attribute img, input, textarea, select, object, and other elements connected to the text:
{Margin: (line-height-img, input, select, object height)/2px 0; vertical-align: middle ;}

 

Others

1. If you need to add a style to the content of tag a, you need to set the display: block; (common in navigation labels)
2. ul labels are listed-style and padding by default under FF. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
3. Do not set the height of the external wrapper div. It is best to add overflow: hidden to achieve highly adaptive.

4. The white space on both sides of the buttons increases with the increase of value in IE7 and earlier browsers. Solution: input, button {overflow: visible ;}

5. The button resets the css style and is compatible with ie6 and ie7. You need to setoverflow:visible

6. IE6 cannot define a very small height, for example, 1px .. Because u has a row height by default, addLine-height: