Shulou(Shulou.com)06/02 Report--

This article mainly introduces the failure of margin-top in Firefox how to do, the article introduces in great detail, has a certain reference value, interested friends must read it!

Solution to the failure of margin-top in Firefox

"collapsingmargins" (folded margin) means that two or more box models (relationships can be adjacent or nested) adjacent margin attributes (which cannot have non-empty content, padding areas, border borders, or use the cleanup separation method) are combined to be represented as a separate margin. In css2.1, horizontal margin is not collapsed.

Vertical margin may be collapsed in some box models:

1. In a regular document stream, the vertical margin adjacent to two or more block-level box models will be collapsed. The final margin value is calculated as follows:

All ◆ are positive, if you choose *

If ◆ is not all positive, then take the absolute value and subtract the * * value from the positive value

If there is no positive value for ◆, take the absolute value and subtract the * * value from 0.

Note: adjacent box models may be generated dynamically by DOM elements and have no adjacency or inheritance relationships.

two。 If one of the adjacent and models is floated, the vertical margin will not be collapsed, even between a floating box model and its child elements.

3. The margin between an element with the overflow attribute set and its child elements will not be collapsed (except that the overflow value is visible).

4. With absolute positioning (position:absolute) set to the box model, the vertical margin will not be collapsed, even between their child elements.

5. Elements with display:inline-block set, vertical margin will not be collapsed, even between their child elements.

6. If the upper and lower margin of a box model are adjacent, its margin may fold and collapsethrough it. In this case, the position of the element (position) depends on whether the margin of its adjacent elements is collapsed.

If the element's margin is collapsed with the margin-top of its parent element, the boundary definition of the box model border-top is the same as its parent element.

In addition, the parent element of any element does not participate in the folding of the margin, or only the margin-bottom of the parent element participates in the calculation. If the border-top of the element is non-zero, the border-top boundary position of the element is the same as before.

The margin-top of an element with a cleanup operation applied will never collapse with the margin-bottom of its block-level parent element. Note that the location of those elements that have been folded has no effect on the position of other elements that have been collapsed; the border-top boundary location is required only when laying out the children of these elements.

7. The vertical margin of the root element is not collapsed.

The margin-bottom of a floating block-level element is always adjacent to the margin-top of the floating block-level sibling element (floatednextin-flowblock-levelsibling) that follows it, unless that sibling element uses a cleanup operation.

The margin-top of a floating block-level element is adjacent to the margin-top of its * floating block-level child elements (floatedfirstin-flowblock-levelchild) (if the element has no border-top, no padding-top, and the child element does not use a cleanup operation).

The margin-bottom of a floating block-level element is adjacent to its margin-bottom of a floating block-level child element if it meets the following conditions (if the element does not specify padding-bottom or border):

◆ specifies height:auto

◆ min-height is less than the actual height used by the element (height)

◆ max-height is greater than the actual height used by the element (height)

If an element's min-height attribute is set to 0, then its margin is adjacent, and it has neither border-top and border-bottom, nor padding-top or padding-bottom, its height attribute can be 0 or auto, it cannot contain an inline box model (linebox), and the margin of all its floating child elements, if any, are adjacent.

When an element has a margin collapsed and it uses a clear operation, its margin-top will collapse with the adjacent margin of the sibling element that follows, but the result is that its margin will not collapse with the margin-bottom of its block-level parent element.

The collapse operation is based on the values of padding, margin, and border (that is, after the browser parses all these values), and the collapsed margin calculation overrides the values of different margin already used.

Viewsourceprint?

1 / 23 br / without the line br, the margin-top:20px of id1 in FIREFOX will act on d0, so that there is a distance between 20px above d0 and body, there is no spacing between D1 and d0, but 4 5 6 is displayed normally in IE.

A simple example is the left and right layers. The left layer is absolutely positioned, the right layer is relative, and the margin-top of the right layer will have problems under firefox. The solution is to clear the float once at the end of the left layer.

The above is all the contents of the article "what to do if margin-top fails in Firefox". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.