Safari 中的边距百分比与 Chrome/Firefox 不同

Question

我在 Safari 中遇到了这个奇怪的错误，这真的很烦人，因为我找不到解决方案。我在 StackOverflow 和互联网上看过类似的问题，但没有人解决我的问题。

有问题的示例在http://jsfiddle.net/WQnVu/5/ 上。所以基本上我有一个图像（这里是一个固定大小的）和两个容器：一个内部和一个外部。图像相对于外部容器绝对定位。为了相对于外部容器的宽度重新定位图像，我然后做一个负百分比的 margin-top。代码如下。

<div class="outer">
    <div class="inner">
        <div class="image"></div>
    </div>
</div>


.outer {
    height: 510px;
    width: 1024px;
    background-color: red;
    position: relative;
}

.inner {
    height: 100%;
    width: 100%;
    background-color: blue;
 }

 .image {
    width: 550px;
    height: 380px;
    position: absolute;
    top: 65%;
    right: 0;
    margin-top: -26%;
    background-color: green;
}

边距百分比应该是相对于图像包含块的宽度（在这种情况下是内部容器）。这确实适用于 Firefox 和 Chrome。然而，在 Safari 中，它计算相对于块本身高度的边距，因此相对于图像的高度！

我不知道如何解决这个问题。我真的需要保证金百分比，因为该网站是响应式的。容器的宽度相应地发生变化，但高度保持不变。这就是为什么我需要一些与容器宽度相关的东西。如果有专门针对 Safari 的黑客，我很乐意使用它，但据我所知，没有这样的事情。

如果有人能想出解决这个问题的方法，那就太好了。

亲切的问候，

约兰

Answer 1

您是否只是尝试使用padding-top而不是margin-top？

我遇到了同样的问题，并以这种方式修复了它。