Browser compatibility issues

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, 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}
About this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! ：）

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" >
You can do it.

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;
}

Browser compatibility issues