html – 为什么页面宽度会影响Firefox中的“margin-top:50%”?

前端之家收集整理的这篇文章主要介绍了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).

(大胆强调我的.)

猜你在找的HTML相关文章