CSS Web page production Tips Tutorial: margin in IE performance

Article Introduction: Summary of margin usage.

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

as shown in the figure above:When the margin-top,margin-left of the Yellow child element box is negative, such as -10px, the yellow child element box moves up (left), over the adjacent element 10px, and the margin-right,margin-bottom of the Yellow child element box is negative. such as -10px, the yellow child element box does not move, it to the right (bottom) of the adjacent elements and left (move up) 10px,Vertical margin Merge problemVertical margin merging problems common to the margin-top of the first child element are the spacing between the parent element and the parent element's adjacent elements.Reason:A box without padding (padding-top) and a top border (border-top), the top margin of the box overlaps 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. will continue to find their own "leadership" (parent element, ancestor Element) trouble. As long as the leadership to set a valid border or padding can effectively control the head of the margin to prevent it from leapfrogwith a margin or a padding ?when margin should be used:
1, need to add white space outside the border.
2, the blank place does not need the background (color).
3, the upper and lower connected two boxes between the blank, need to cancel each other. such as 15px + 20px of margin, will get 20px blank.When should be used padding:
1, need to add blank when border.
2. When the blank space needs a background (color).
3. The blank between the two boxes connected up and down, the hope equals the sum of the two. such as 15px + 20px of padding, will get 35px blank.Summary:Margin is used to separate elements from the space between elements, padding is used to separate elements from the content of the interval. Margin is used to layout separate elements so that elements are irrelevant to elements; padding is used for the interval between elements and content, and there is a "breathing distance" between the content (text) and the (wrapped) elements.

common browsers for bugs that appear under margin
IE6 in the double margin bug:
Occurrence: Margin double when setting the Margin-left (element Float:left) or margin-right (element Float:right) for the first floating element within the parent element.
Solution: To add display:inline to the floating element; CSS properties, or replace Margin-left with Padding-left.
Principle Analysis: Block-level object default Display property value is blocks, when set the float, but also set its outer margin will appear this situation. You may ask: "Why is there no double margin bug between the object and the first object?" Because floats have their corresponding objects, only floating objects relative to their parent object can have such a problem. 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 distance bug, first of all inline element or inline-block element is not a bilateral distance problem. Then, Float:left and other floating properties can make the inline element haslayout, will let the inline element behaves like the inline-block element characteristic, supports the high width, the vertical margin and the padding and so on, 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 floating element naturally floats close to the 3px bug that will appear.
Workaround: The right elements also float together, or add IE6 Hack _margin-left:-3px to the right element to eliminate 3px spacing.
Principle Analysis: IE6 browser flaw bug.
Ie6/7 Negative margin hide bugs:
Occurrence: When a negative margin is set to a haslayout element within a haslayout parent element, the parent element part 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 's unique haslayout produces problems.
Ie6/7 under Ul/ol tag vanishing bug:
Occurrence: When Ul/ol triggers haslayout and writes Margin-left on Ul/ol, the previous default ul/ol tag disappears.
Workaround: Set margin-left for Li instead of setting Margin-left for Ul/ol.
Principle Analysis: Ie6/7 browser bug
IE6/7 margin and absolute elements overlap bugs:
Occurrence: Two-column adaptive layout, the left element absolute absolute positioning, the right side of the margin open distance positioning. The block-level element with the absolute attribute applied to the left of the IE6/7 overlaps the adaptive text content on the right.
Workaround: Change the left block level element to an inline element, such as replacing the div with span.
Principle Analysis: This is because the Ie6/ie7 browser inline horizontal tag elements and block level of the label elements are not differentiated equally rendered. belongs to the Ie6/7 browser to render bugs.
IE6/7/8 under Auto Margin center BUG:
Occasion: Set the block element to margin Auto cannot center
Workaround: This bug is usually caused by no doctype, and then the quirks mode of IE is triggered, plus the DOCTYPE declaration is OK. In the "Beat IE Sunflower book" in the method given is to add a width to the block element can be resolved, but according to my parents, plus with this method is invalid, if no doctype even to add width to the element can not make the Block element center.
Principle analysis: Lack of DOCTYPE declaration.
IE8 under Input[button submit] setting Margin:auto cannot be centered
Occurrence: Under IE8, if you give a label such as a button (such as button input[type= "button"] input[type= "submit"), set {display:block; margin:0 auto;} If you do not set the width, you cannot center.
Solution: You can add 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 margin.
Workaround: Add a Overflow:hidden/auto to the parent element.
Principle Analysis: IE8 browser bug.