Internet Explorer compatibility issues summary

One, how to solve the IE7 and IE8 bug

Microsoft offers three modes of parsing pages in IE8
IE8 Standard Modes: The default mode, in strict accordance with the relevant regulations
IE7 Standards MODES:IE7 is now used to parse the mode of the Web page, open the organization is added in the Quirks modes:ie5 The mode of parsing the Web page, the open authority is to remove the DOCTYPE declaration at the top of the HTML
Note: The different modes of the Web page in IE8 can frame each other, so because the DOM and CSS rendering is not the same, so there will be a lot of problems, it is important to note that if your page to IE7 compatibility without problems, and do not want to modify the existing code, but also in IE8 normal use, Microsoft claims that Developers only need to add a line of code on the currently compatible IE7 website to solve the problem, this code is as follows:

<meta http-equiv= "x-ua-compatible" content= "ie=7"/>
IE8 Latest CSS hack:

"/9" Example: "margin:0px auto/9;". Here the "/9" can be distinguished from all IE and Firefox.
"*" IE6, IE7 can be identified. IE8, Firefox cannot.
"_" IE6 can Identify "_", IE7, IE8, Firefox cannot.

Second, CSS page layout compatibility What are the key points and tips?

IE vs FF

CSS Compatibility essentials: DOCTYPE Impact CSS Processing

Ff:div set Margin-left, Margin-right is auto when the center, IE No

Ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important

FF: Support!important, IE is ignored, can be used!important to set the FF special style

Vertical center of DIV problem: vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line

Cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can

FF: Link plus border and background color, need to set Display:block, and set Float:left guarantee not to break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the MenuBar xhtml+css compatibility solution small Set

The use of XHTML+CSS framework benefits a lot, but there are some problems, whether it is because of the use of unskilled or the idea is not clear, I first put some of the problems I encountered in the following.

1. The difference between the box models in Mozilla Firefox and IE is inconsistent, resulting in 2px resolution:

div{margin:30px!important;margin:28px;}
Note that the order of the two margin must not be written in reverse,!important this property ie is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

2.ie5 and IE6 's box explain inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px . At this point we can make the following changes:

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

3.UL tags in mozilla default is padding value, and in IE, only margin has value, so first define

ul{margin:0;padding:0;}
Will solve most of the problems.

4. For scripts, the language attribute is not supported in xhtml1.1, just change the code to

<script type= "Text/javascript" >

Third, compatible with IE5.0, IE5.5, IE6.0, IE7.0, FF1.5, FF2.0 CSS hack

This CSS hack code example, you can visually display the use of various versions of the browser hack. Compatible with IE5.0, IE5.5, IE6.0, IE7.0, FF1.5, FF2.0.
IE7.0 the official version of the release, for me and other people who work with the Web page compatibility problem also comes. IE7.0 has a significant change is to support!important, is a good thing, but also to the vast majority of the IE6 era using!important to distinguish between the Internet Explorer and FF Web-based author brought a lot of problems, Noker also encountered this problem, so read the online information, Write the following this can be compatible with most of today's mainstream browser, covering the vast majority of users of the hack code!
Compatible browser version: ie5.0,ie5.5,ie6.0,ie7.0,firefox1.5,firefox2.0
CSS code: (Please note the order of the hack code)

#test {
width:300px;
height:100px;
Background: #DDD!important;/*ff*/
Background: #FF0;/*ie5.0*/
}
#test/*ie5.5+*/{
*+background: #C0F!important;/*ie7.0*/
*background: #F00;/*ie6.0*/
*background/*ie5.5*/: #F90;
}four, CSS compatibility program Some of the latest tipsMake your style perfectly compatible with the major browsers, this program is mainly used to solve the safari, Opear is in the test when the passing of a try, the results found unexpectedly also, so by the way also solved.

. e {/*ff op*/
*+html. e{
Background-color: #000000;/*op*/
*background-color: #0000FF;/*ie7*/
}
* HTML. e{/*ie6*/
Background-color: #00FFFF
}

It is important to note that IE7 's interpretation of the style is related to the DTD, where IE7 can read IE6 hack without a DTD.

Five, must master the simplest CSS hack tips on IE6, IE7 and FF

FF Browser

. test{
height:20px;
Background-color:orange;
}
IE7 Browser

*+html. test{/*ie7*/
height:20px;
Background-color:blue;
}
IE6 Browser

*html. test{/*ie6*/
height:20px;
Background-color:black;
}
You can see that FF is the most obedient browser through the CSS code above.
In IE6 and IE7 if you want to use hack you must precede the tag HTML with the husband level.
Here is very good memory, IE6 plus *html, and IE7 plus *+html, hinted added a version.
The advantage of CSS hack for class and ID is that it does not have to take into account the sequence, and is easy for management and other people to accept.
You can also use this hack to achieve a similar version of the Js browser control.

Read the above content can click the following effect in different browsers to see the effect,
Where Orange stands for FF, blue for IE7, and black for IE6.

VI, CSS hacks: Introduction to browser-specific selectors

IE6 below

*html{}
IE 7 or less

*:first-child+html {} * HTML {}
Only for IE 7

*:first-child+html {}
Only for IE 7 and modern browsers

Html>body {}
Only for modern browsers (non IE 7)

Html>/**/body {}
Latest Opera 9 versions below

Html:first-child {}
Safari

Html[xmlns*= ""] body:last-child {}
To use these selectors, write down the code before the style. For example:

#content-box {
width:300px;
height:150px;
}
* HTML #content-box {
width:250px;
}
/* Rewrite the above code and change the width to 250PX
Applies in the following versions of IE6. */

Seven, CSS hack technology Quick Check comparison

*:lang (ZH) select {font:12px!important;}/*ff,op Visible */
select:empty {font:12px!important;}/*safari Visible */
Here select is the selector and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.
IE7 Identification only

*+html {...}
This hack can be used when faced with the need to make a style for IE7 only.
IE6 and IE6 following identification

* HTML {...}
This place should pay special attention to a lot of landlords have written IE6 hack actually ie5.x can also recognize this hack. Other browsers are not recognized.
html/**/>body Select {...}
This sentence has the same effect as the previous sentence.
Only IE6 not recognized, shielded IE6

Select {display/*/mask Ie6*/:none;}
The main point here is to separate a property and value from the CSS comment before the colon.
Only IE6 and IE5 are not recognized, shielded IE6 and IE5

select/**/{display/*IE6,IE5 does not recognize */:none;}
The difference between this and the above sentence is that there is a CSS comment between the selector and the curly brace. Non-shielded IE5.5
Only IE5 not recognized, shielded IE5

SELECT/*IE5 not recognized */{...}
This sentence removes the comment from the attribute area in the previous sentence. Only IE5 is not recognized, IE5.5 can be identified.
Box Model Solving method

SELCT {width:ie5.x width; voice-family: "/"}/""; Voice-family:inherit; Width: correct widths;}
The cleaning method of the box model is not handled by!important. This should be clear.
Clear floating

Select:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the child is floating, then the height of the parent can not completely wrap the entire child, then use this to clear the floating hack to do a definition of the parent, then you can solve the problem.
Truncation character ellipsis

Select {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
This is the more out of the length of the self-cut off the portion of the text, and end with an ellipsis, a very good technology. Only Firefox does not support it at this time.
Only Opera recognizes

@media all and (min-width:0px) {select {...}}
Make a separate setting for Opera browser.
The above are some of the CSS hack, these are used to solve the local compatibility problem, if you want to separate the compatibility of the content, may wish to try the following several filters. Some of these filters are written in CSS to import special styles through filters, as well as the use of conditions to link or import the required patch styles in HTML.

ie5.x filter, only ie5.x visible

@media TTY {
I{content: "/";/* "" */}} @import ' Ie5win.css '; /*";}
}/* */
Ie5/mac filters, generally no need

/*/*//*/
@import "Ie5mac.css";
/**/
ie if condition hack

<!--[if ie]> only IE <! [endif]-->
All IE is recognizable
<!--[if IE 5.0]> only IE 5.0 <! [endif]-->
Only IE5.0 can identify
<!--[if GT ie 5.0]> only ie 5.0+ <! [endif]-->
IE5.0 shifting IE5.5 can be identified
<!--[if LT ie 6]> only ie 6-<! [endif]-->
Only IE6 recognizable
<!--[if GTE ie 6]> only ie 6/+ <! [endif]-->
IE6 and ie5.x below IE6 are recognizable
<!--[if LTE IE 7]> only IE 7/-<! [endif]-->
Only IE7 recognizable
The above may not be comprehensive, you are welcome to join me together with these skills, to provide a convenient query for future work, but also here to thank those who have studied these hack authors.

Eight, solve the xhtml+css compatibility of five programs!

The use of the XHTML+CSS framework benefits a lot, but there are some problems, whether because of the use of unskilled or not clear-minded

1. The difference between the box models in Mozilla Firefox and IE is inconsistent, resulting in 2px resolution:

div{margin:30px!important;margin:28px;}

Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

2.ie5 and IE6 's box explain inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes:

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

The 3.UL tag has a padding value in Mozilla, whereas in IE only margin has value, it is defined first:

ul{margin:0;padding:0;}

will be able to solve most of the problems.

4. For scripts, the language attribute is not supported in xhtml1.1, just change the code to:

You can do it.

5. If you align the direction of float and text-align in the box container:

{float:left;text-align:left;margin:0 0 0 200px;}

{float:left;text-align:left;margin:0 0 0 200px;display:inline;}

Internet Explorer compatibility issues summary