CSS compatibility issues Experience Summary

CSS compatibility issues experience Summary, the level is limited, if where wrong, hope correct.

Are written long ago, the level is limited, if where wrong, I hope to correct.

the problem with ie:

I. Bilateral distance issue
The outer margin of a floating element doubles, but the outer margin of the other floating elements adjacent to the first floating element is not doubled.
Workaround: Add style display:inline to this floating element;

Two. The gap produced by the picture
The parent element directly contains the <IMG&GT, and the bottom of the picture creates a gap with the edge of the parent element.
Solution: 1. Let </div> and be on the same line in the source code, because that gap is generated by line breaks.
2. Give add style display:block;

Three. Minimum height problem
The minimum height of block element is 10px, when the height definition is less than 10px, still 10px;
Workaround: Add style overflow:hidden for this block element; Or make the font size of this block element equal to the height of this element.

Four. If Li is floating in the list, then the element following the list cannot be wrapped.
If Li is floating in the list, the elements behind the list cannot be wrapped.
Solution: For this UL definition appropriate high or to include this UL parent div definition appropriate high.

Five. The upper and lower bounds of the child element (when the parent element does not have a height defined)
When the parent element does not have a height defined, the upper and lower bounds of the child element are superimposed on the upper and lower bounds of the parent element, and are displayed outside the parent element.
Workaround: Define the inner margin or border for the parent element.

Firefox issue:

A. If Li is floating in the list, the element that follows the list cannot be wrapped.
If Li is floating in the list, the elements behind the list cannot be wrapped.
Solution: For this UL definition of the appropriate width or to include this ul of the parent Div to define the appropriate width of the height.

Two. The upper and lower bounds of the child element (when the parent element does not have a height defined)
When the parent element does not have a height defined, the upper and lower bounds of the child element are superimposed on the upper and lower bounds of the parent element, and are displayed outside the parent element.
Workaround: Define the inner margin or border for the parent element.


compatibility issues between the two:

One. Horizontal Center
IE6: Use text-align not only to center the text, but also to center the nested block elements.
FF2: Use Text-align to center the text only.
Workaround: Add margin:0 Auto to the block element that needs to be centered;

Two. Div highly adaptive problem
IE6: The height of the parent element increases if the content exceeds the height of the parent element.
FF2: If the content exceeds the height of the parent element, the content is not hidden and the parent element's height is not increased.
WORKAROUND: (Assuming a minimum height of 50px) adds min-height:50px to the parent element;
Height:auto!important;
height:50px;

Three. The height problem when the parent element contains a floating child element
IE6: The height will be the quilt floating element is stretched.
FF2: The height will not be the quilt floating element is stretched.
Workaround: Add a div after the sub floating element, the definition of this div: Clear:both;
line-height:1px;
Visibility:hidden;

Four. Nesting element margin Height overlay problem (when defining the width of the parent element)
IE6: The top margin of the child element is superimposed with the upper interior margin of the parent element.
FF2: The top margin of the child element is added with the upper inner margin of the parent element.
Workaround: Use padding or margin alone.

Five. Problem of the top margin of the child element (when defining the height of the parent element)
IE6: The top margin of the child element appears normal.
FF2: The top margin of the child element is displayed above the parent element.
Workaround: Add Overflow:hidden to parent element; Or add a border or an inner margin to the parent element.

Six. Sub-element negative boundary problem
IE6: A part of the parent element is overwritten by the parent element.
FF2: The parent element is overwritten by a portion of the parent element, but if the parent element has a border or an inner margin, the negative margin appears on the parent element, leaving the parent element with a negative margin.
Workaround: Use relative positioning.

Seven. Default display problem for list
IE6: The list has the left, bottom, and right margins, and the bullets are outside the list.
FF2: The list has the upper and lower bounds, the left and right interior margins, and the bullets in the list.
Solution: Add the style for the UL: margin:0;
padding:0;


The default padding and margin of eight .<body> different problems.
Workaround: Add style to body: margin:0;
padding:0;
Nine. Use an absolute positioning problem for elements (when an element defines an outer margin)
IE6: The outer margin is not considered part of an element, so the outer margin is not valid when absolute positioning is used on this element.
FF2: The outer margin is considered part of the element, so the outer margin is valid when using absolute positioning for this element. (for example, Margin_top will be added to top)