为什么页面宽度影响“margin-top：50％”在Firefox？ [英] Why does the page width affect "margin-top:50%" in Firefox?

问题描述

在此JSFiddle

http://jsfiddle.net/9UMRk/

一个div的margin-top为50％。我期望调整到页面高度。

但是，如果您在Firefox（3& 4）中调整窗口大小，则会看到div的垂直位置受到网页宽度的影响，高度。

为什么？

解决方案

这似乎不直观，实际上是根据边框的框模型，其中指出，在CSS level 2.1 spec ：

百分比是根据的生成框的包含块。注意，对于margin-top和margin-bottom也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义生成的布局。

并在CSS3规范（更清楚IMO）：

请注意，在水平流中， -top'和'margin-bottom'是相对于包含块的宽度而不是高度（在垂直流中，margin-left是相对于高度而不是宽度）。

（粗体强调我的意思。 >

In this JSFiddle

http://jsfiddle.net/9UMRk/

A div has a margin-top of 50%. Which I would expect to adjust to the page height.

However, if you resize the window in Firefox (3 & 4), you'll see the div's vertical positioning is affected by the page width, but not the page height.

Why?

解决方案

It does seem counter-intuitive, but is in fact in accordance to the box model for margins, which states, in the CSS level 2.1 spec:

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

And in the CSS3 spec (more clearly IMO):

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).

(Bold emphases mine.)

这篇关于为什么页面宽度影响“margin-top：50％”在Firefox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！