CSS Compatibility essentials:
1, DOCTYPE influence CSS processing.
2, Ff:div set Margin-left, margin-right for Auto is already centered, IE not.
3, Ff:body set text-align, Div need to set Margin:auto (mainly margin-left,margin-right) square can be centered.
4, 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.
5, FF: Support!important, IE is ignored, can be used!important for FF special settings style.
6, Div Vertical center 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.
7, Cursor:pointer can be at the same time in the IE FF display cursor finger-like, hand only IE can.
8, FF: Link plus border and background color, you need to set the Display:block, while setting the Float:left guarantee do not change lines. 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 framework benefits a lot, but there are some problems, whether it is because of the use of unskilled or not clear thinking, I will first put some of the problems I encountered in the following, the province of everyone around to find ^ ^
1. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in a 2px resolution:
Copy Code code as follows:
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:
Copy Code code as follows:
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:
Copy Code code as follows:
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.
