Multi-browser CSS Compatibility Analysis Summary _ Experience Exchange

CSS Compatibility essentials:
1, DOCTYPE affect the CSS processing.
2, Ff:div set Margin-left, margin-right for Auto is already centered, IE not.
3, Ff:body set text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) can be centered.
4, FF: Set padding, div will increase height and width, but IE will not, it needs to use!important more set a height and width.
5, FF: Support!important, IE is ignored, can be used!important for FF special set style.
6, the vertical center div problem: Vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to wrap.
7, Cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can.
8, FF: Link plus border and background color, you need to set Display:block, and set Float:left guarantee not to break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.

XHTML+CSS Compatibility Solution Small Set
The use of XHTML+CSS framework benefits a lot, but there are some problems, whether because of the use of unskilled or the idea is not clear, I first put some of the problems I encountered in the following, the province of everyone looking around ^ ^

1. The difference between the box models in Mozilla Firefox and IE is inconsistent, resulting in 2px resolution:
Copy CodeThe code is as follows:
div{margin:30px!important;margin:28px;}

Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:
Copy CodeThe code is as follows:
DIV{MARING:30PX;MARGIN:28PX}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

2.ie5 and IE6 's box explain inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes:
Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}
About this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! ：）

The 3.UL tag has a padding value in Mozilla, whereas in IE only margin has value, it is defined first:
Copy CodeThe code is as follows:
ul{margin:0;padding:0;}

will be able to solve most of the problems.

4. For scripts, the language attribute is not supported in xhtml1.1, just change the code to