CSS in IE and Firefox compatibility essentials analysis

IE vs FF





CSS Compatibility essentials:





DOCTYPE affects CSS processing





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





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, can be!important for FF special set style





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 line





Cursor:pointer can display cursor finger shape 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





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 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:





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





Note that the order of the two margin must not write the reverse, according to the Czech Republic!important This property IE is not recognized, but other browsers can identify. So in the case of IE, the explanation is as follows:





div{maring:30px;margin:28px}





repeat the definition of the words according to the last 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. Then we can make the following modifications





Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}





, about this/**/is what I do not understand, only know IE5 and Firefox support but IE6 do not support, if someone understand, please tell me, thanks! ：）





3.UL label in Mozilla default is padding value, and in IE only margin have value, so first define





ul{margin:0;padding:0;}





can solve most of the problems





4. With respect to scripts, language properties are not supported in xhtml1.1, just change the code to





<script type= "Text/javascript" >





on it.