Analysis of CSS Compatibility Key Points_Experience Exchange

IE vs FF

CSS compatibility points:

DOCTYPE affects CSS processing

FF: div is already centered when margin-left and margin-right are set to auto, but IE does not work

FF: When setting text-align on the body, the div needs to set margin: auto (mainly margin-left, margin-right) to be centered

FF: After setting padding, the div will increase height and width, but IE does not know it, so you need to use !important to set an extra height and width

FF: supports !important, but IE ignores it, you can use !important to set the style of

div specially for FF Vertical centering problem: vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text and it will be vertically centered. The disadvantage is that it is necessary to control the content without wrapping

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

FF: Links add borders and background colors, need to set display: block, and set float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, you can insert a space in menubar. Small collection of XHTML+CSS compatibility solutions

There are many benefits to using XHTML+CSS architecture , but there are indeed some problems, whether it is due to unskilled use or unclear thinking, I will write down some of the problems I encountered below to save everyone from looking around^^

1. In mozilla The BOX model interpretation in firefox and IE is inconsistent, resulting in a 2px difference. Solution:

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

Note that the order of these two margins must not be written. On the contrary, according to Ajie, the !important attribute is not recognized by IE, but other browsers can. So it is actually interpreted like this under IE:

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

If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;

2. The BOX interpretation of IE5 and IE6 is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;}under IE5 will be interpreted as 300px-10px (right padding)-10px (left Padding) The final width of the div is 280px. On IE6 and other browsers, the width is calculated as 300px+10px (right padding) + 10px (left padding) = 320px. At this time we can make the following modifications

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

, about this/**/ I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands, please let me know, thanks! :)

3.ul tag has padding value by default in Mozilla, but in IE only margin has value, so define

ul{margin:0;padding:0;} first

can solve most problems

4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to

<script> <BR></script>