CSS Tips Tutorial: The performance of margin in IE

The displacement direction of margin refers to the case where the margin value is positive, and if it is negative, the displacement is in the opposite direction.

As shown in: When the margin-top,margin-left of the Yellow child element box is negative, such as -10px, the yellow child element box moves up (to the left), crosses the adjacent element 10px, and the yellow child element box has a negative margin-right,margin-bottom. such as -10px, the yellow child element box does not move, its right (bottom) of the adjacent element and the left (move up) 10px, vertical margin merging problem vertical margin merging problem common to the first child element of the Margin-top will open the parent element and the parent element spacing reason: A box if there is no filler ( Padding-top) and the top border (border-top), the top margin of the box overlaps with the top margin of the first child element in its internal document flow. The top margin of the first child element of the parent element margin-top if a valid border or padding is not touched. The trouble of "leading" (parent element, ancestor Element) will continue to be found on a level by layer. As long as an effective border or padding is given to the leader, it is effective to control the non-lead margin to prevent it from jumping with margin or using padding when the margin should be used:

1, need to add a blank outside the border.

2, the blank place does not need the background (color).

3, the upper and lower connected two boxes between the blanks, need to cancel each other. such as 15px + 20px margin, will get 20px blank. When should you use padding:

1, need to add a blank in border beta.

2. When the background (color) is needed for the blank space.

3. The gap between the top and bottom two boxes is equal to the sum of the two. such as 15px + 20px padding, will get 35px blank. Summary: Margin is used to separate elements from the spacing between elements, padding is used to separate elements from the content of the interval. Margin is used to separate elements from elements so that elements are irrelevant to each other, and padding is used for the interval between elements and content, so that there is a "breathing distance" between content (text) and (wrapped) elements.

Common browser margin appears in the bug

IE6 in the double-sided bug:

Occurrence: Margin doubles when the first floating element within the parent element is set to Margin-left (element Float:left) or margin-right (element float:right).

Solution: To add display:inline to the floating element; CSS properties, or use Padding-left instead of margin-left.

Principle Analysis: Block-level objects The default display property value is block, and when the float is set, it also sets the margin for this situation. You might ask, "Why don't there be a double margin bug between the object after and the first object?" Because floats have their corresponding objects, this problem only occurs with floating objects that are relative to their parent objects. The first object is relative to the parent object, and then the object is relative to the first object, so there is no problem after the object is set. Why Display:inline can solve this bilateral bug, first of all the inline element or inline-block element is no bilateral distance problem. Then, floating properties such as float:left allow the inline element to haslayout, allowing the inline element to behave like inline-block elements, supporting high widths, vertical margin, and padding, so div All the styles of class can be used on this display inline element.

Floating element 3px interval bug in IE6:

Occurrence: Occurs when an element floats, and then a non-floating element naturally floats close to the 3px bug that appears.

WORKAROUND: The right element also floats together, or add IE6 Hack _margin-left:-3px for the right element, eliminating 3px spacing.

Principle Analysis: IE6 bug of browser bug.

Ie6/7 negative margin hidden bug:

Occurrence: When a negative margin is set for a non-haslayout element within a haslayout parent element, the part of the parent element is not visible.

Workaround: Remove the haslayout of the parent element, or assign haslayout to the child element and add position:relative;

Principle Analysis: Ie6/7 unique haslayout generation problem.

Ie6/7 the ul/ol tag disappears bug:

Occurrence: When Ul/ol triggers Haslayout and is written margin-left on Ul/ol, the previous default ul/ol tag disappears.

Workaround: Set Margin-left to Li instead of setting Margin-left for Ul/ol.

Principle Analysis: Ie6/7 browser bug

IE6/7 margin and absolute element overlap BUG:

Occurrence: The two-column adaptive layout, the left element absolute absolute positioning, the right margin to open the distance positioning. Block-level elements that have the absolute attribute applied to the left of IE6/7 overlap with the adaptive text content on the right.

Workaround: Change the left block level element to an inline element, such as changing the div to span.

Principle Analysis: This is due to the fact that the Ie6/ie7 browser will not differentiate between the inline horizontal tag element and the block level tag element. belongs to the Ie6/7 browser rendering bug.

IE6/7/8 Auto Margin Center bug:

Occurrence: Setting margin auto to block element cannot be centered

Workaround: The cause of this bug is usually no doctype, and then triggered the IE quirks mode, plus the DOCTYPE declaration can be. In the "Beat IE Sunflower Treasure Book" In the method is to add a width to block elements can be solved, but according to my own test, plus with this method is invalid, if there is no doctype even add width to the element can not let the block element center.

Principle analysis: Missing DOCTYPE declaration.

IE8 under Input[button submit] settings Margin:auto cannot be centered

Occurrence: Under IE8, if a label such as button (such as button input[type= "button"] input[type= "Submit") set {display:block; margin:0 auto;} If you don't set the width, you can't center.

Workaround: You can add a width to input

Principle Analysis: IE8 browser bug.

IE8 percent padding vertical margin bug:

Occurrence: When the parent element sets a percentage of padding, the child element has a vertical margin, as if the parent element was set to margin.

Workaround: Add a Overflow:hidden/auto to the parent element.

CSS Tips Tutorial: The performance of margin in IE