The CSS compatibility Encyclopedia of IE and Firefox

CSS compatibility Encyclopedia for IE and firefox-browser compatibility tutorial

CSS for browser compatibility is very high value, usually in the case of IE and Firefox there is a large resolution differences, here to introduce the compatibility points.

Common compatibility issues:

1, DOCTYPE Impact CSS Processing

2, Ff:div set Margin-left, margin-right for Auto is already centered, IE not

3, Ff:body set text-align, Div need to set Margin:auto (mainly margin-left,margin-right) square can be centered

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

5, FF: Support!important, IE is ignored, available!important for FF special settings 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 be at the same time in the IE FF display cursor finger-like, hand only IE can

8, FF: Link plus border and background color, you need to set the Display:block, while setting 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 in the box model interpretation of inconsistencies led to a difference of 2px solution:

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

Pay attention to the order of these two margin must not write the 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 explanation is 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 measured in 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}

I also do not understand what this/**/is, only know IE5 and Firefox support but IE6 not support.

11, UL label in Mozilla default is padding value, and in IE only margin have value, so first define

ul{margin:0;padding:0;}

We can solve most of the problems.

Matters needing attention:

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

Solution

is to add display:inline to this 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 the container has a parallel layout, such as three float Div, the width is very easy to problem. 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 dynamically adding content, 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. As follows

. 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 on another sentence, above has been mentioned undefined undefined