4

我在 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 的黑客攻击，我很乐意使用它，但据我所知，没有这样的东西。

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

亲切的问候，

约兰

4

5 回答 5

5

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

我有同样的问题，我以这种方式解决了它。

于 2013-10-16T11:10:31.970 回答
1

如果需要在 Safari 中根据宽度计算 margin-top 或 margin-bottom，可以使用 vw（视口宽度）结合 calc（如果需要）来设置。Mac 和 iOS 的 Safari 都很好地支持这两者。只需为其他浏览器留一个后备：

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%;
}
于 2013-06-05T15:07:25.050 回答
0

如果高度保持不变，您可以执行以下操作：

<!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>
于 2013-04-30T08:57:43.483 回答
0

我建议一个仅针对 Safari 的 JS 解决方案，获取.outer的宽度，根据该宽度计算 margin-top 并将其应用于您的.image。

像这样：

        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 时遇到了一些麻烦——我认为它妨碍了检测浏览器。在此处查看示例页面。

希望有帮助。

于 2013-07-12T04:44:01.070 回答
0

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

margin: calc(100vw * .50);
于 2020-09-17T04:45:28.357 回答