在这个 JSFiddle 中
div 的 margin-top 为 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 - 为什么页面宽度会影响 Firefox 中的 "margin-top:50%"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7386353/