What are the key points and tips for DIV CSS web page layout compatibility? _html/css

What are the key points and tips for DIV CSS web page layout compatibility? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 12:29:53

Original

1307 people have browsed it

IE vs FF

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 text-align is set 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 will not, so it is necessary Use !important to set an additional height and width
FF: !important is supported, but IE ignores it. You can use !important to specially set the style for FF. The vertical centering problem of
div: vertical-align:middle; increase the line spacing to and The entire DIV is the same height as line-height: 200px; then insert 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 set float: left guarantees no line breaks. Referring to the menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If the height is not set, you can insert a space in the menubar. XHTML CSS Compatibility Solution Collection
There are many benefits to using the XHTML CSS framework, but there are also There are indeed some problems, whether it is due to unskilled use or unclear thinking, I will first write down some of the problems I encountered below.
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 If written in reverse, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:
div{maring:30px;margin:28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important;
2. The BOX interpretation of IE5 and IE6 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 div width is 280px. On IE6 and other browsers, the width 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 that IE5 and firefox support it but IE6 does not. If anyone If you understand, please tell me, thanks! :)
3.ul tag has padding value by default in Mozilla, but in IE only margin has value, so define
ul{margin:0;padding:0;}
first to solve the problem Most of the questions
4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to