Summary about CSS browser compatibility and Solutions

IE problems:

I. Bilateral distance issues
The margin of the floating element is doubled, but the margin of other floating elements adjacent to the first floating element is not doubled.
Solution: add the display: inline style to the floating element;

Ii. gap between images
The parent element directly contains , which is separated from the edge of the parent element.
Solution: 1. In the source code, set </div> to the same line as , because the gap is generated by line breaks.
2. Add the display: block style to ;

Iii. Minimum height problem
The minimum height of the block element is 10px. If the height is defined as less than 10px, it is still 10px;
Solution: add the style overflow: hidden to the block element, or set the font size of the block element to the height of the element.

4. If the li in the list is floating, the elements behind the list cannot be wrapped.
If the li in the list is floating, the elements following the list cannot wrap.
Solution: define the appropriate height for this ul or define the appropriate height for the parent div containing this ul.

5. Upper and Lower boundary issues of child elements (when the parent element does not have a defined height)
When the parent element does not have a defined height, the upper and lower outer boundary of the child element is superimposed on the upper and lower outer boundary of the parent element and displayed outside the parent element.
Solution: Define the padding or border for the parent element.

Firefox problems:

1. If the li in the list is floating, the elements behind the list cannot wrap.
If the li in the list is floating, the elements following the list cannot wrap.
Solution: Define the proper width and height for this ul or define the appropriate width and height for the parent div containing this ul.

Ii. Upper and Lower boundary issues of child elements (when the parent element does not have a defined height)
When the parent element does not have a defined height, the upper and lower outer boundary of the child element is superimposed on the upper and lower outer boundary of the parent element and displayed outside the parent element.
Solution: Define the padding or border for the parent element.

Compatibility issues between the two:

I. horizontal center
IE6: using text-align can not only center the text, but also center nested block elements.
FF2: Use text-align to center only the text.
Solution: add margin: 0 auto to the block element to be centered;

Ii. div height self-adaptation
IE6: If the content height exceeds the height of the parent element, the height of the parent element increases.
FF2: If the content height exceeds the height of the parent element, the content will not be hidden, and the height of the parent element will not increase.
Solution: (assuming the minimum height is 50px) add min-height: 50px to the parent element;
Height: auto! Important;
Height: 50px;

Iii. height issues when the parent element contains floating child elements
IE6: The height will be lifted by the floating elements of the quilt.
FF2: The height is not supported by the floating elements of the quilt.
Solution: Add a div after the child floating element. The div is defined as clear: both;
Line-height: 1px;
Visibility: hidden;

4. overlapping of the padding height of nested elements (when defining the width of the parent element)
IE6: The top margin of the child element and the top margin of the parent element are superimposed.
FF2: The top margin of the child element and the top padding of the parent element.
Solution: Use padding or margin separately.

5. Top margin of child elements (when the parent element height is defined)
IE6: The top margin of the child element is displayed normally.
FF2: The top margin of the child element is displayed above the parent element.
Solution: Add overflow: hidden to the parent element, or add a border or padding to the parent element.

6. Negative boundary of child elements
IE6: the parts that exceed the parent element will be overwritten by the parent element.
FF2: the part that exceeds the parent element will overwrite the parent element, provided that the parent element has a border or internal margin, otherwise the negative margin will be displayed on the parent element, so that the parent element has a negative margin.
Solution: use relative positioning.

7. default list display problems
IE6: the list has the left boundary, bottom boundary, and right inner margin, and the project symbol is outside the list.
FF2: The list contains upper and lower boundary, left and right padding, and project symbols in the list.
Solution: add style: margin: 0 to ul;
Padding: 0;

8. The default padding and margin of <body> are different.
Solution: Add a style to the body: margin: 0;
Padding: 0;
9. Use absolute positioning for elements (when the element defines the margin)
IE6: the outer margin is not considered a part of the element. Therefore, when this element is absolutely positioned, the outer margin is invalid.
FF2: the outer margin is considered as a part of the element, so the outer margin is valid when this element is absolutely positioned. (For example, margin_top will be added to top)