Home >Web Front-end >HTML Tutorial >div css compatibility_html/css_WEB-ITnose
----------------------------------------Compatibility----- -------------------------------------------------- ----
CSS compatibility points: DOCTYPE affects CSS processing
FF: div is already centered when margin-left and margin-right are set to auto, but IE does not work
FF : When setting text-align on the body, the div needs to set margin: auto (mainly margin-left, margin-right) to be centered
FF: After setting padding, the div will increase height and width, but IE does not Yes, so you need to use !important to set an extra height and width
FF: !important is supported, but IE ignores it. You can use !important to specially set the style for FF
Vertical centering problem of div: vertical -align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert the text and it will be vertically centered. The disadvantage is that you need to control the content without wrapping
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE
FF: Links add borders and background colors, you need to set display: block, and at the same time Setting float: left ensures no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, you can insert a space in menubar. Small set of XHTML CSS compatibility solutions
2. BOX of IE5 and IE6 Interpretation is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;} under IE5 will be interpreted as 300px-10px (right padding)-10px (left padding). The final width of the div is 280px, while in IE6 and other The width on the browser 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}
About this/**/ I don’t quite understand what it 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 define 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