XHTML+CSS Compatibility Solution Small Set

css|xhtml| Solve

The use of XHTML+CSS framework benefits a lot, but there are some problems, whether because of the use of unskilled or not clear thinking, I first put some of the problems I encountered in the following, the province of the people around to find.

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 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 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, and in IE only margin have a value, so first defined:

			ul{margin:0;padding:0;}

will be able to solve most of the problems.

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

<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;}