Common browser compatibility issues in html and css-CSS Tutorial-php.cn

We will definitely use css in html development, but sometimes development is not as smooth as we thought. For example, common browser compatibility issues in html and css, then for this browser compatibility In this section, we will teach you how to solve the problem.

1. Centering problem

The content in the div is centered by IE by default, and left-aligned by FF by default. You can try adding code:

margin: 0 auto;

Copy after login

2. Height problem

For two divs arranged one above the other or nested, the height of the div above is set. If the actual content in the div is greater than the set height, the two divs will overlap in FF; but In IE, the div below will automatically make space for the div above. So in order to avoid overlapping layers, the height must be controlled appropriately, or you may simply not write the height and let it adjust automatically. A better method is height:100%. ;But when the first-level elements in this div are all floated, you need to add an empty div with a sunken bottom at the end of the div block and before closing. The corresponding CSS is:

float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

Copy after login

3. clear: both;

If you don’t want to be affected by float, just write clear: both;

4. Double distance generated by IE floating margin

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

Copy after login

5. Padding problem

After FF sets padding, div will increase height and width, but IE will not (* standard XHTML1.0 definition dtd seems to be consistent) height control Appropriate, or try to use height:100%; use padding to reduce the width. But according to actual experience, generally the padding of FF and IE will not be much different. The actual width of the div = width + padding, so write the full width and padding, width of the div. Define padding as the actual desired width.

6. Problems with padding and marign on the y-axis when divs are nested

The distance from the child div to the parent div on the y-axis in FF is parent padding + child marign

In IE, the distance between the child div on the y-axis and the parent div is the larger of the parent padding and the child margin

In FF, when the parent padding=0 and border=0 on the y-axis, the child div The distance to the parent div is 0, and the child margin acts outside the parent div

7. Foolish solution techniques for padding, margin, height, width

Note that this is a technique , not a method:

Write the standard header

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=” 
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

Copy after login

8. List class

1. The ul tag has a padding value by default in FF, but in In IE, only margin has a value

First define ul {margin:0;padding:0;}

2. Indentation problem of ul and ol lists When eliminating the indentation of ul, ol and other lists , the style should be written as: {list-style:none;margin:0px;padding:0px;}

9. Display class (display:block,inline)

1. Two elements, display:block and inline

display:block; //Inline elements can be simulated as block elements

display:inline; //Achieve the effect of being arranged in the same line

display:table; //for FF, simulate the effect of table

display:block block element, the characteristics of the element are:

Always start on a new line; Height, line height, and top and bottom margins are all controllable; the width defaults to 100% of its container, unless a width is set