Attention to CSS compatibility during standard station construction

css| Standard | process | Problems using XHTML+CSS Framework benefits a lot, but there are some problems, whether it is because of the use of unskilled or unclear thinking, I first put some of the problems I encountered in the following, the province to look around.

　　 1. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in a 2px resolution:

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

Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in IE, in fact, explained that:

DIV{MARING:30PX;MARGIN:28PX}

Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;

　　 2.ie5 and IE6 's box explanations are 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 with 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}

About this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if someone understand, please tell me, thanks!:)

　　 3.UL tags in mozilla default is padding value, while in IE only margin have a valueSo first define:

ul{margin:0;padding:0;}

will be able to solve most of the problems.

　　 4. About scripts, language properties are not supported in xhtml1.1, simply change the code to read:

<script type= "Text/javascript" >

It's OK.

　　 5. If you make the float and text-align in the box container in the same direction：

{float:left;text-align:left;margin:0 0 0 200px;}
We can make the following modifications:

{float:left;text-align:left;margin:0 0 0 200px;display:inline;}