Shulou(Shulou.com)06/02 Report--

This article introduces you what are the CSS compatibility issues of IE and Firefox, the content is very detailed, interested friends can refer to, hope to be helpful to you.

To introduce the CSS compatibility of IE and Firefox, CSS is of high value to the compatibility of browsers. Usually, there are great parsing differences between IE and Firefox. Here are some key points of compatibility.

The problem of CSS compatibility between IE and Firefox can be summarized.

CSS has a high value for browser compatibility. There is usually a big parsing difference between IE and Firefox. Here are some compatibility points.

1. DOCTYPE affects CSS processing.

2. Firefox: div is already in the middle when setting margin-left,margin-right to auto, but not IE

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

4. Firefox: after setting padding, div will add height and width, but IE will not, so you need to use important to set up an extra height and width.

5. Firefox: yes! important,IE is ignored, available! important specially sets the style for Firefox, and it is worth noting that the sentence xxxxxexamples should be placed on top of another sentence.

6. Vertical centering of div: vertical-align:middle; increases the line spacing to the same height as the whole DIV, line-height:200px; and then inserts text, which is centered vertically. The disadvantage is to control the content and not to change the line.

7. Cursor:pointer can display the cursor finger shape in IEFirefox at the same time, and hand can only display IE.

8. Firefox: if you add a border and background color to the link, you need to set display:block and float:left to ensure no line wrapping. With reference to menubar, the height of an and menubar is set to avoid misalignment of the bottom edge. if you do not set height, you can insert a space in the menubar.

9. The inconsistent interpretation of BOX model in mozillafirefox and IE leads to the difference of 2px solution: div {marginal Vega 30px importante marginal Vega 28px;}

Note that the order of the two margin must not be reversed, according to Ajie! the attribute important IE is not recognized, but other browsers can. So under IE, it is actually interpreted as follows: div {maring:30px;margin:28px}

Repeat the definition according to * one, so you can't just write margin _

10. The BOX interpretations of IE5 and IE6 are inconsistent.

Div {width:300px;margin:010px010px;} under IE5

The width of div is interpreted as 300px-10px (right fill)-10px (left fill) the width of the final div is 280px, while on IE6 and other browsers the width is calculated as 300px+10px (right fill) + 10px (left fill) = 320px. At this time, we can make the following modifications: div {widthva300pxThe importantwitch widthUniplex 340pxTrachever 010px010px}

11. Ul tags have a padding value by default in Mozilla, while only margin has a value in IE, so defining ul {margin:0;padding:0;} first can solve most of the problems.

This is the end of the CSS compatibility between IE and Firefox. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.