A summary of CSS differences in IE6 IE7 IE8 IE9 and Firefox Chrome

1.DOCTYPE affects CSS processing
2.ff:div set Margin-left, Margin-right is already centered when auto, IE not
3.ff:body set Text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center
4.FF: Set padding, div will increase the height and width, but IE will not, it needs to use!important more set a height and width
5.FF: Support!important, IE is ignored, available!important for FF special set style
6.div Vertical Center problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines
7.cursor:pointer can display cursor finger-like in IE FF at the same time, hand only IE can
8.FF: Links with border and background color, you need to set the Display:block, and set the Float:left guarantee do not change lines. Refer to MenuBar, to 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.
9. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in a difference of 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 Czech version! Important This property IE is not recognized, but other browsers can recognize it. So in the case of IE, the explanation is as follows: div{maring:30px;margin:28px} Repeat the definition of the words according to the last to execute, so can not only write margin:xxpx! important;
11.UL tags in mozilla default is padding value, and in IE only margin have a value, so first define ul{margin:0;padding:0;} We can solve most of the problems.

Precautions:

1, float the div must be closed.
For example: (where the Floata, FLOATB properties are already set to Float:left;)

<div id= "Floata" ></div>
<div id= "FLOATB" ></div>
<div id= "NOTFLOATC" ></div>
The NOTFLOATC here do not want to continue to translate, but want to row down.
This code has no problem with IE, the problem is ff. The reason is that NOTFLOATC is not a float label and the float label must be closed.
In

<div class= "FLOATB" ></div>
<div class= "NOTFLOATC" ></div>
Plus

<div class= "Clear" ></div>
This div must pay attention to the declaration location, must be placed in the most appropriate place, and must be with two of the float property of the div sibling, there can be no nested relationship, or you will produce an exception.
and define clear this style as follows:
. clear{
Clear:both;
}
In addition, in order to allow the height to automatically adapt, to wrapper inside add Overflow:hidden;
When the box contains float, the height of automatic adaptation in IE invalid, this time should trigger IE layout private properties (the evil of IE) with zoom:1, can be achieved, so that the compatibility.

For example, a wrapper is defined as follows:

. colwrapper{
Overflow:hidden;
Zoom:1;
margin:5px Auto;}

2, the question of margin double
Div set to float will double the margin set under IE. This is a bug that IE6 all exist.
The solution is to add display:inline to the div;

For example:

<div id= "Imfloat" ></div>

The corresponding CSS is

#IamFloat {
Float:left;
Margin:5px;/*ie under the understanding of 10px*/
Display:inline;/*ie to be understood as 5px*/}

3, on the inclusion of the relationship between the container
Many times, especially when there are parallel layouts in the container, such as three float Div, the width is easily problematic. In IE, the width of the outer layer is broken by a wider div inside. Be sure to use Photoshop or firework to measure pixel-level precision.
4, about the height of the problem
If you are adding content dynamically, it is best not to define the height. The browser can scale automatically, however, if it is static content, the height is best set. (Sometimes it doesn't seem to go down automatically, don't know exactly what's going on)
5, the most ruthless means-!important;
If there is no way to solve some of the details, you can use this method. FF will automatically give priority to "!important", while IE will ignore it.

. tabd1{
Background:url (/res/images/up/tab1.gif) no-repeat 0px 0px!important; /*style for ff*/
Background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

It is worth noting that the XXXX!important must be placed above another sentence, which has been mentioned above
IE7.0 's support for CSS has new problems. Browser more, the Web page compatibility is worse, tired or we, in order to solve the compatibility problem of IE7.0, to find the following article:

Now I mostly use!important to hack, for IE6 and Firefox test can be normal display, but IE7 to!important can be correctly interpreted, will cause the page did not appear as required! Search for a while, to find a good hack for IE7 is the use of "*+html", now with IE7 Browse, there should be no problem.

Now write a CSS can do this:

#example {color: #333;}/* Moz/*
* HTML #example {color: #666}/* IE6 * *
*+html #example {color: #999;}/* IE7 * *

Then in Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.

On the CSS for each browser compatibility has been a cliché, the network of tutorials everywhere. The following content is not too novel, purely personal summary, I hope to have some help for beginners.
First, CSS hack the following two methods can almost solve all the hack today.

1,!important

With the support of IE7 to!important, the!important method is now targeted only at IE6 hack. (Note the wording. Remember that the claim position needs to be advanced.)

<style>
#wrapper
{
Width:100px!important; * IE7+FF * *
width:80px; * IE6 * *
}
</style>

2, Ie6/ie77 to Firefox

*+html and *html is the unique label of IE, Firefox is not supported. And *+html is IE7 unique label.

<style>
#wrapper
{
#wrapper {width:120px}/* FireFox/*
*html #wrapper {width:80px}////* IE6 fixed */
*+html #wrapper {width:60px}//* IE7 fixed, note order * *
}
</style>

Attention:
*+html to IE7 hack must ensure that the top of the HTML has the following declaration:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

Second, universal float closure
The principle of clear float can be found in [how to clear floats without structural Markup]
Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.

<style>
/* Clear Fix */

. clearfix:after
{
Content: '. ';
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
. clearfix
{
Display:inline-block;
}
/* Hide from IE Mac */
. Clearfix {Display:block}
/* End hide from IE Mac */
/* End of Clearfix */
</style>
 
III, other compatibility tips
1, FF set PA for Div Dding will cause width and height to increase, but IE will not. (Available!important solution)
2, center problem.
1). Center vertically. Set the line-height to the same height as the current Div, and then pass the Vertical-align:middle. (Note that the content is not wrapped.)
2). Center horizontally. margin:0 Auto; (of course not omnipotent)
3, if you need to add style to the contents of a label, you need to set the Display:block (common to navigation tags)
4, FF and IE on the BOX understanding of the difference between 2px is also set to FL Oat div under IE margin double the problem.
5, UL tags under FF default to have List-style and padding. It is best to make a statement in advance to avoid unnecessary trouble. (Common in navigation labels and content lists)
6, as an external wrapper div do not set the dead height, preferably plus overflow:hidden. To achieve a high degree of adaptability.
7, about the hand cursor. Cursor:pointer. and hand only applies to IE.

1 CSS styles for Firefox IE6 IE7
Now most of them are using!important to hack, and for IE6 and Firefox tests to be displayed properly,
But IE7 to!important can correctly explain, will cause the page does not appear according to the request! Find a needle
To IE7 good hack way is to use "*+html", now with IE7 browsing, should have no problem.
Now write a CSS can do this:

#1 {color: #333;}/* Moz/*
* HTML #1 {color: #666}/* IE6 * *
*+html #1 {color: #999;}/* IE7 * *

Then in Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.

2 centering problems in CSS layouts
The main style definitions are as follows:

body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }

Description
First, the parent element defines text-align:center, which means that the content within the parent element is centered, and for IE this setting is OK. But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; "To be sure, if you want to use this method to make the whole page centered, it is recommended not to be nested in a div, you can split out multiple div, as long as in each of the div defined margin-right:auto;" Margin-left:auto; It's OK.

3 box models different interpretations

#box {width:600px;//for ie6.0-width:500px;//for ff+ie6.0}
#box {width:600px!important//for ff width:600px;//for ff+ie6.0 width/**/:500px;//for ie6.0-}

4 double distance generated by the floating IE

#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce a distance of 200px
Display:inline; Make floating Ignore} Here's a block,inline two elements, which are characterized by: always start on a new line, height, width, row height, margin can be controlled (block element); Inline element is characterized by: on the same line as other elements,... Not controllable (inline element);
#box {display:block;//can simulate an inline element as a block element display:inline//effect of arranging the same row
diplay:table;

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This is a big problem, if you only use width and height,
In the normal browser, these two values will not change, if only with Min-width and min-height, ie below is not set width and height.
For example, to set the background picture, this width is more important. To solve this problem, you can do this:

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

6 minimum width of the page

Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE doesn't recognize this,
And it actually turns the width to the minimum. To make this command available on IE, you can put a div under the Body tab and then assign a class to the DIV:
Then CSS is designed like this:

#container {min-width:600px width:expression (Document.body.clientWidth < 600?) "600px": "Auto");
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.

7 Clear Floating

. hackbox{display:table;//Display the object as a table at the block element level} or. hackbox{Clear:both;
or add: After (Pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support,
So it doesn't affect the Ie/win browser. This is the most troublesome ... #box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}

8 Div Floating IE text produces 3 pixel bugs

The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.

#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>

9 Property Selector (This is not compatible, is a hidden CSS bug)

p[id]{}div[id]{}
This is hidden from the IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, and the scope of the child selector shrinks from the form, and the property selector is larger in scope, as in P[id], and all of the P tags have the same type of ID.

The question of IE hide-and-seek

When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.
Some content does not show up when the mouse selects this area is found to be true on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

11 Height Not suitable

Height is not adaptable when the height of the inner object changes when the outer height can not be automatically adjusted, especially when the inner object is used
When margin or paddign.
Cases:

<div id= "box" >
Content in the <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 and from the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

/*ie and Firefox CSS compatibility Encyclopedia * *

1.DOCTYPE affects CSS processing

2.ff:div set Margin-left, Margin-right is already centered when auto, IE not

3.ff:body set Text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

4.FF: Set padding, div will increase the height and width, but IE will not, it needs to use!important more set a height and width

5.FF: Support!important, IE is ignored, available!important for FF special set style

6.div Vertical Center problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines

7.cursor:pointer can display cursor finger-like in IE FF at the same time, hand only IE can

8.FF: Links with border and background color, you need to set the Display:block, and set the Float:left guarantee do not change lines. Refer to MenuBar, to 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.

9. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in a 2px resolution:
div{margin:30px!important;margin:28px;}
Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in IE, in fact, explained that:
DIV{MARING:30PX;MARGIN:28PX}
Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;

10.ie5 and IE6 's box explanations are 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 with 300px+10px (right padding) +10px (left padding) =320px. Then we can make the following modifications
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 someone understand, please tell me, thanks! ：）

11.UL tags in mozilla default is padding value, and in IE only margin have a value, so first define
ul{margin:0;padding:0;}
We can solve most of the problems.

Precautions:

1, float the div must be closed.

For example: (where the Floata, FLOATB properties are already set to Float:left;)

< #div id= "Floata" ></#div >
< #div id= "FLOATB" ></#div >
< #div id= "NOTFLOATC" ></#div >
The NOTFLOATC here do not want to continue to translate, but want to row down.
This code has no problem with IE, the problem is ff. The reason is that NOTFLOATC is not a float label and the float label must be closed.
In

< #div class= "FLOATB" ></#div >
< #div class= "NOTFLOATC" ></#div >
Plus
< #div class= "clear" ></#div >
This div must pay attention to the declaration location, must be placed in the most appropriate place, and must be with two of the float property of the div sibling, there can be no nested relationship, or you will produce an exception.
and define clear this style as follows:
. clear{
Clear:both;}
In addition, in order to allow the height to automatically adapt, to wrapper inside add Overflow:hidden;
When the box contains float, the height of automatic adaptation in IE invalid, this time should trigger IE layout private properties (Evil ie Ah!). Can be done with zoom:1, so that compatibility is achieved.
For example, a wrapper is defined as follows:
. colwrapper{
Overflow:hidden;
Zoom:1;
margin:5px Auto;}

2, margin double the problem.

Div set to float will double the margin set under IE. This is a bug that IE6 all exist.
The solution is to add display:inline to the div;
For example:

< #div id= "imfloat" ></#div >

The corresponding CSS is

#IamFloat {
Float:left;
Margin:5px;/*ie under the understanding of 10px*/
Display:inline;/*ie to be understood as 5px*/}

3, on the inclusion of the relationship between the container

Many times, especially when there are parallel layouts in the container, such as three float Div, the width is easily problematic. In IE, the width of the outer layer is broken by a wider div inside. Be sure to use Photoshop or firework to measure pixel-level precision.

4, about the height of the problem

If you are adding content dynamically, it is best not to define the height. The browser can scale automatically, however, if it is static content, the height is best set. (Sometimes it doesn't seem to go down automatically, don't know exactly what's going on)

5, the most ruthless means-!important;

If there is no way to solve some of the details, you can use this method. FF will automatically give priority to "!important", while IE will ignore it.
. tabd1{
Background:url (/res/images/up/tab1.gif) no-repeat 0px 0px!important; /*style for ff*/
Background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

DIV+CSS Compatibility (ii)

April 02, 2008, Wednesday 10:58

DIV+CSS compatible IE6 IE7 Firefox

The most common way to distinguish between Firefox and IE is the!important approach, and there are several other ways to compatibility with different versions of browsers and browsers, such as @import, annotations, attribute selectors, child object selectors, and voice-family, which are CSS Web site layout in the transcript of the story.

The following are CSS compatibility issues with IE and Firefox

1.DOCTYPE affects CSS processing

2.ff:div set Margin-left, Margin-right is already centered when auto, IE not

3.ff:body set Text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

4.FF: Set padding, div will increase the height and width, but IE will not, it needs to use!important more set a height and width

5.FF: Support!important, IE is ignored, available!important for FF special set style