Common browser compatibility handling in HTML+CSS

1. Centering problem

div content, ie default is centered, and FF default is left-aligned, you can try to increase the code margin:0 auto;

2. Height issues

Two up or nested div, above the div set height (height), if the actual content of the div is greater than the set height, there will be two div overlap phenomenon in the FF, but in IE, the following Div will automatically give space to the above div so as to avoid overlapping layers, Height must control appropriate, or simply do not write height, let him automatically adjust, better method is height:100%; but when the div inside the first element is float, you need to add a sink empty div at the end of the Div block, and the corresponding CSS is:. Float_ bottom {Clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both;

Don't want to be floated by float, write clear:both in Div;

4.IE floating margin double distance generated

#box {
Float:left;
width:100px;
margin:0 0 0 100px; In this case, IE will produce 200px distance
Display:inline; Make floating Ignore
}

5.padding problem

After FF sets the padding, the div will increase the height and width, but IE will not (* The standard XHTML1.0 definition DTD seems to be consistent) height control is appropriate, or try to use height:100%; width reduction using padding but based on practical experience, General F F and IE's padding will not be much different, the actual width of the div = width + padding, so the div writes full width and padding,width with the actual desired width minus the padding definition.

Problems with padding and marign on the y-axis when nesting 6.div

The distance from the Sub div on the Y axis of the FF to the parent Div is the parent padding + child marign
The distance from the y-axis Sub-div to the parent div in IE is a large one in the parent padding and the child marign.
When the parent padding=0 and border=0 on the y axis of the FF, the distance of the child div to the parent div is 0, and the child marign acts outside the parent Div

7.padding,marign,height,width's idiot-solving skills

Attention is a skill, not a method:
Write the standard head.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
High as far as possible with padding, cautious use margin,height as far as possible to fill up 100%, the parent height has fixed value child height without 100%, the child is floating when the bottom of a blank clear:both the div width as far as possible with margin, cautious use padding, Width is the actual minus padding.

8. List class

1. The UL tag has padding value in FF, and only margin in IE is value
First define the UL {margin:0;padding:0;}
2. UL and OL list indent problem eliminate the indentation of UL, OL and other lists, the style should be written as: {list-style:none;margin:0px;padding:0px;}

View browser compatibility system code processing Daquan: HTTP://USER.QZONE.QQ.COM/1047832475/2

Common browser compatibility handling in HTML+CSS