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).

(大胆强调我的.)

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些