Summary of multi-browser css compatibility analysis_Experience exchange

CSS compatibility points:
1. DOCTYPE affects CSS processing.
2. FF: div is already centered when margin-left and margin-right are set to auto, but IE cannot.
3. FF: When setting text-align on the body, the 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 to set an extra height and width.
5. FF: supports !important, but IE ignores it. You can use !important to set a special style for FF.
6. The vertical centering problem of div: 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 you have to control the content and not wrap it.
7. Cursor: pointer can display the cursor finger shape in IE FF at the same time, while hand can only be displayed in IE.
8. FF: To add borders and background colors to links, you need to set display: block and 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, a space can be inserted in menubar.

A small collection of XHTML CSS compatibility solutions
Using the XHTML+CSS architecture has many benefits, but there are indeed some problems. Whether it is due to unskilled use or unclear thinking, I will first summarize some of the problems I encountered The problem is written below to save everyone from looking around ^^

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

Copy code The code is as follows:

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

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

Copy code The code is as follows:

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 under IE5 div{width:300px;margin:0 10px 0 10px;}The width of the div will be interpreted as 300px-10px (right padding)-10px (left padding). The final width of the div is 280px, while on IE6 and other browsers the width is 300px 10px (right padding) 10px (Left padding)=320px is calculated. At this time we can make the following modifications:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
I don’t quite understand what this /**/ is , I only know that IE5 and Firefox support it but IE6 does not. If anyone understands it, please tell me, thanks! :)

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

Copy code The code is as follows:

ul{margin:0;padding:0;}

can solve most of the problems .

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