html – 为什么页面宽度会影响Firefox中的“margin-top：50％”？

在这个JSfiddle中

http://jsfiddle.net/9UMRk/

div的保证金最高可达50％.我希望调整到页面高度.

但是,如果您在Firefox(3& 4)中调整窗口大小,您将看到div的垂直位置受页面宽度的影响,但不受页面高度的影响.

为什么？

解决方法

它看起来似乎是违反直觉的,但实际上是根据边距的盒子模型,其中指出,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.

和in the CSS3 spec(更清楚的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).

(大胆强调我的.)

原文地址：https://www.jb51.cc/html/232268.html