html - 为什么 "top: -50%;"在这种情况下不起作用，但 "left: -50%"却起作用

Question

这是我的示例代码:

.container {
    position: absolute;
    left: 50%;
    top: 50%;
}

.container .box{
    position: relative;
    width: 200px;
    height: 200px;
    left: -50%;
    top: -50%;
    background-color: red;
}

在 .container 元素中，我没有设置宽度和高度。但是这个例子适用于水平面，但不适用于垂直面。实际上，top的计算值为-100px，但是浏览器并没有移动.box元素100px > 到顶部。

Answer 1

这看起来像是 webkit 中的错误。如果你搜索他们的错误跟踪器，你会看到它不时出现在那里( 14762 ， 23570 )。

他们甚至有一个针对此问题的测试用例，但出人意料地失败了。您可以在这里尝试:https://bug-14762-attachments.webkit.org/attachment.cgi?id=15679