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

This article mainly explains "what are the CSS compatible knowledge points of IE and Firefox". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deep into it slowly to study and learn "what are the CSS compatible knowledge points of IE and Firefox" together!

1. DOCTYPE affects CSS processing

2.FF: div Set margin-left, margin-right is centered when auto, IE does not work

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

4.FF: After setting padding, div will increase height and width, but IE will not, so you need to use! important Set a height and width

5.FF: Support! important, IE ignored, available! important Special Style for FF

6. Div vertical centering problem: vertical-align:middle; increase the line spacing to the same height as the entire DIV line-height:200px; then insert text to center vertically. The disadvantage is that you have to control the content and not change the line.

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

8.FF: Add border and background color to links, set display: block, and set float: left to ensure no line breaks. Refer to menubar, the height of a and menubar is set to avoid misplacement of the bottom edge, if not set height, you can insert a space in menubar.

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

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

Note that the order of these two margins must not be written in reverse, according to Ah Jie! Important This attribute is not recognized by IE, but other browsers can recognize it. Therefore, under IE, it is actually interpreted as follows:

div{maring:30px;margin:28px}

If you repeat the definition, follow the last one, so you can't just write margin:XXpx! important;

10. Box interpretation of IE5 and IE6 is inconsistent

IE5 Down

div{width:300px;margin:0 10px 0 10px;}

The width of a div is interpreted as 300px-10px (right padding)-10px(left padding) and the final div width is 280px, whereas on IE6 and other browsers the width is calculated as 300px +10px (right padding)+10px (left padding)= 320px. At this point we can make the following modifications

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

on this/** /I don't quite understand what it is. I only know that IE5 and Firefox support it, but IE 6 doesn't. If anyone understands, please let me know. Thank you!:)

11.ul tag in Mozilla default is a padding value, but in IE only margin has a value, so define first

ul{margin:0;padding:0;}

we can solve most problems.

Notes:

The div of float must be closed.

For example: (where floatA, floatB attributes have been set to float:left;)

NOTfloatC here doesn't want to continue panning, but wants to go down.

This code works fine in IE, the problem is FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.

in

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.