Go CSS Browser compatibility issues summary

e6.0,ie7.0 CSS compatibility issues with Firefox 1.DOCTYPE impact CSS Processing
2.ff:div set Margin-left, Margin-right is auto when the center, IE No
3.ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center
4.FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important
5.FF: Support!important, IE is ignored, can be used!important for FF special set style, it is worth noting that the XXXX!important this sentence placed on the other sentence above
6.div Vertical centering 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
7.cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can
8.FF: Link with border and background color, need to set Display:block, and set Float:left guarantee does not 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.
9. The box model in Mozilla Firefox and IE does not explain inconsistencies 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 actually explains this: 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;

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 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! ：）

11.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.

　　
Precautions:

1. The div of float must be closed.

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


The NOTFLOATC here do not want to continue panning, but want to go down the line.
This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed.
In

Added between
This div must be aware of the location of the declaration, must be placed in the most appropriate place, and must be two with a float attribute of the div sibling, there can be no nested relationship, otherwise it will produce an exception.
And the clear style is defined as follows:. clear{
Clear:both;}
In addition, in order to allow the height can automatically adapt, to wrapper inside add Overflow:hidden;
When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.
For example a certain wrapper is defined as follows:

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

2. Double the issue of margin.

A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.
The solution is to add display:inline to this div;
For example:



The corresponding CSS is

Program code
#IamFloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie under the 5px*/}

3, about the containment of the container relationship

Many times, especially when there are parallel layouts in the container, such as two or three float's Div, the width is prone to problems. In IE, the width of the outer layer is broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy.

4, about the height of the problem

If you are adding content dynamically, it is best not to define it highly. The browser can automatically scale, but if it is static content, the height is best set. (Sometimes it doesn't seem to be going off automatically, not knowing what's going on)

5, the most ruthless means-!important;

If there is no way to solve some of the details, we can use this method. FF will automatically parse for "!important", but IE will be ignored.

Program code
. 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 should be noted that the XXXX!important must be placed on the other sentence above, has mentioned



IE7.0 out, the support for CSS has new problems. Browser more, page compatibility worse, tired or we, in order to solve IE7.0 compatibility problems, find the following article:


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

Now write a CSS that can do this:

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

Then in Firefox font color display as #333,ie6 under the font color display as #666,ie7 under the font color display as #999, they do not interfere.

Go CSS Browser compatibility issues summary