CSS is of great value to the compatibility of browsers. Generally, There are big differences between Internet Explorer and Firefox in parsing. Here are the compatibility points.

Common compatibility issues:

1.DOCTYPE affects CSS processing

FF: if div is set to margin-left and margin-right is set to auto, it is already centered

3.FF: body set text-align, div needs to set margin: auto(mainly margin-left,margin-right) to center

FF: After setting the padding, div will increase the height and width, but IE will not. Important Set a height and width

5. FF: support! Important, IE ignore, available! Important sets the style for FF specifically

6. Div vertical center: vertical-align:middle; Increase the line spacing to the same height as the entire DIV. Line-height :200px; Then you insert the text, and you center it vertically. The disadvantage is that you have to control the content not to break lines

You can display cursor fingers in IE FF at the same time, hand is only available in IE

8.FF: link with border and background color. Display: block. Refer to Menubar. The height of a and menubar is set to avoid misalignment of the bottom edge display. If height is not set, insert a space in menubar.

9. In Mozilla Firefox and IE BOX model interpretation is inconsistent, resulting in a 2px difference.

div{margin:30px! important; margin:28px; } Note that the order of these two margins must not be written in reverse, according to Ajer! The important attribute is not recognized by IE, but is recognized by other browsers. So in IE, it actually translates like this:

div{maring:30px; Margin :28px} margin:XXpx! important;

10. The BOX interpretations in Internet Explorer 5 and Internet Explorer 6 are inconsistent

div{width:300px; margin:0 10px 0 10px; The width of the} div will be interpreted as 300px-10px(right)-10px(left). The final div will be 280px wide, whereas in IE6 and other browsers the width is calculated as 300px+10px(right)+10px(left)=320px. At this point we can make the following changes

div{width:300px! important; width //:340px; Margin :0 10px 0 10px} margin:0 10px 0 10px} margin:0 10px 0 10px} 🙂

Ul tags have padding values by default in Mozilla, while in IE only margin values are defined first

ul{margin:0; padding:0; } will solve most problems

Matters needing attention:

Float div must be closed.

Float :left; float:left; float:left;

<#div id=”floatA” ></#div> <#div ID =”floatB” ></#div> <#div ID =”NOTfloatC” ></#div> Here NOTfloatC does not want to continue to float, it wants to float down. This code has no problem in IE, the problem is FF. The reason is that NOTfloatC is not a float tag and the float tag must be closed. in

# < div class = “floatB” > # < / div > < div class = # “NOTfloatC” > # < / div > between plus

<#div class=”clear”></#div> This div must be declared in the most appropriate place, and must be identical to two divs with float attributes. And define the clear style as follows:

.clear{ clear:both; } Also, in order for the height to automatically adapt, add overflow:hidden inside the Wrapper; Height autofit does not work in IE when a float box is included, and should trigger IE’s Layout private property. Zoom: 1; You can do it, and that’s compatible. For example, a wrapper is defined as follows:

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto; }

2. Margin doubling problem.

Div that is set to float has a margin double in IE. This is a bug that exists in IE6. The solution is to add display:inline; Such as:

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

The corresponding CSS is

#IamFloat{ float:left; margin:5px; 10px/ display:inline; /IE = 5px/}

3. Inclusion relation of containers

A lot of times, especially when containers have parallel layouts, such as divs with two or three floats, it’s easy to have width issues. In IE, the width of the outer layer is squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure pixel-level accuracy.

4. The question of height

If you are adding content dynamically, the height is best left undefined. Browsers can scale automatically, but for static content, the height is best set. (Sometimes it doesn’t seem to push itself down, I don’t know what’s going on)

5, the most ruthless means -! important;

If there is no way to solve some details, use this method. FF for! “” “Important” is automatically parsed first, whereas IE ignores it. The following

.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 */} ———————————————— Copyright notice: This article is originally published BY CSDN blogger jsship. It follows CC 4.0 BY-SA copyright agreement. The original link: blog.csdn.net/jsship/arti…