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？

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

Answer 2

如果需要根据Safari中的宽度计算margin-top或margin-bottom，可以使用vw（视口宽度）与calc（如有必要）一起设置它。这两个都在Safari for Mac和iOS中得到了很好的支持。只留下其他浏览器的后备：

<强> HTML：

<div id="container">
    <img src="image.png" />
</div>

<强> CSS：

#container {
    height: 500px;
    width: 50%;
}
#container img {
    margin-top: 20%; /* Fallback */
    margin-top: calc( 50vw * .2 );
    max-width: 100%;
}

Answer 3

如果高度保持不变，你可以这样做：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {
    height: 510px;
    width: 70%;
    background-color: red;
    position: relative;
}

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

.image {
    width: 550px;
    height: 380px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -190px;
    background-color: green;
}
</style>

</head>
<body>

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

</body>
</html>

Answer 4

我建议使用仅针对Safari的JS解决方案，获取 .outer 的宽度，根据该宽度计算margin-top并将其应用于 .image < / em>的

喜欢这样：

var width = $('.outer').width(); // get width of .outer var topMargin = width * -0.26; // calculate -0.26% of .outer's width // check if the browser is Safari if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { $('.image').css('margin-top', topMargin+'px'); // apply the calculated margin to .image } else { };

使用JS Fiddle时遇到了一些麻烦 - 我认为它妨碍了浏览器的检测。查看示例页面here。

希望有所帮助。

Answer 5

我遇到了同样的问题！不用CSS来获取视口宽度，只需在CSS中使用calc并以十进制形式的百分比计算视口单位时间。

margin: calc(100vw * .50);

Safari中的保证金百分比与Chrome / Firefox不同

5 个答案: