There are many benefits to using the XHTML+CSS framework, but there are indeed some problems. Whether it is due to inexperience or unclear thinking, I will first write down some of the problems I encountered below to save everyone from searching around.
1. The BOX model interpretation in mozilla 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 in reverse, according to Ajie! The important attribute is not recognized by IE, but other browsers can. Therefore, it is actually interpreted like this under IE:
Ifdiv{maring:30px;margin:28px}
is repeatedly defined, the last one will be executed, 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 the width on IE6 and other browsers It 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}
I don’t quite understand what this /**/ is, I only know IE5 and firefox Both are supported but IE6 does not support it. If anyone understands it, please let me know. Thanks! :)
3. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so defining it first:
ul{margin:0;padding:0;}
can solve most problems.
4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to:
That's it.
5. If you set the directions of float and text-align in the BOX container to be the same:
{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;}