Summary: What are the key points and tricks of CSS page layout compatibility?

css| Web page

IE vs FF

CSS Compatibility essentials: DOCTYPE Impact CSS Processing

Ff:div set Margin-left, Margin-right is already centered when auto, IE not

Ff:body set Text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

FF: Set padding, div will increase the height and width, but IE will not, it is necessary to use!important more set a height and width

FF: Support!important, IE is ignored, available!important for FF special set style

The vertical center of the div problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines

Cursor:pointer can display cursor finger-like in IE FF at the same time, hand only IE can

FF: Link with border and background color, set Display:block, and set Float:left guarantee No line wrapping. Refer to MenuBar, to 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 architecture benefits a lot, but there are some problems, whether because of the use of unskilled or unclear thinking, I first put some of the problems I encountered in the following.

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,!important this property 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 define

ul{margin:0;padding:0;}

We can 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 okay.