Home >Web Front-end >HTML Tutorial >[Web front-end development] Browser compatibility processing encyclopedia_html/css_WEB-ITnose
[Web front-end development] Browser compatibility processing encyclopedia_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:541530browse
1. Centering problem
The content in the div is centered by IE by default, and left-aligned by FF by default. You can try to add code margin: 0 auto;
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, two divs will overlap in FF. phenomenon; but in IE, the lower div will automatically make space for the upper div, so in order to avoid overlapping layers, the height must be controlled appropriately, or 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 float, 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;}
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
#box {
float:left;
width:100px;
margin:0 0 0 100px; //In this case, IE will generate a distance of 200px
display:inline; //Ignore floating
}
5. Padding problem
After FF sets padding, the div will increase height and width, but IE will not (* the standard XHTML1.0 definition dtd seems to be consistent) to control the height appropriately, or try to use height:100% ; Use padding to reduce the width. But according to actual experience, generally there will not be much difference between the padding of FF and IE. The actual width of the div = width padding, so write the full width and padding of the div. Width is defined by the actual desired width minus padding. .
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 the parent padding and child marign
The y-axis in IE The distance from the upper child div to the parent div is the larger of the parent padding and the child marign.
When the parent padding=0 and border=0 on the y-axis in FF, the distance from the child div to the parent div is 0, and the child marign affects the parent. Outside the div
7. Foolish solutions to padding, margin, height, width
Note that it is a skill, not a method:
Write the standard header well
Use padding as much as possible, use margin with caution, and try to add 100% to the height. If the parent height has a fixed value, the child height does not need to be 100%. When all are floating, fill in an empty space at the bottom of clear: both divs should be as wide as possible. Use padding with caution. Calculate the width accurately and subtract padding
8. List class
1. ul Tags have a padding value by default in FF, but in IE only margin has a value
First define ul {margin:0;padding:0;}
2. Eliminate the indentation problem of ul and ol lists. When indenting lists such as ol, 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; //You can simulate inline elements as block elements
display:inline; //Achieve the effect of being arranged in the same row
display: table; //for FF, simulate the effect of table
display:block block element, the characteristics of the element are:
always starts on a new line; height, line height and top and bottom margins can all be controlled; The width defaults to 100% of its container, unless a width is set
,