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

【问题标题】：Margin percentage different in Safari than Chrome/FirefoxSafari 中的保证金百分比与 Chrome/Firefox 不同
【发布时间】：2020-09-17 14:59:20
【问题描述】：

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

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

亲切的问候，

约兰

【问题讨论】：

您说宽度经常变化，但您将它们设置为 px。他们是如何变化的？这只是说明问题的一个例子吗？
看起来 safari 不喜欢将 % 用于 margin-top 之类的东西，您可以使用一些 jquery 在 px 中解决它，这样它就可以使用 @ 放置在您想要的位置987654326@
这只是一个例子，实际上外容器的宽度确实是一个百分比。有没有办法在 Javascript 中只针对 Safari？
是的，有！请参阅下面的答案。

标签： css cross-browser safari

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果需要在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%;
}

【讨论】：

【解决方案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>

【讨论】：

如果图像具有固定尺寸，这将正常工作。出于示例的目的，情况就是这样，但在实际问题中，图像随其容器缩放。宽度和高度实际上应该是最大宽度和最大高度。
好的，我还不是很清楚这里的所有参数。外层容器的宽高需要灵活吗，内层的div和图片也一样？图像是否总是需要与右侧齐平，图像上方和下方是否总是需要相等的空间？甚至需要内部 div 吗？
嗨拉尔夫。 外部容器的宽度和高度是否需要灵活，内部的div和图像也需要？ 只有外部容器的宽度是灵活的，高度保持不变。内部 div 也是如此。图像缩放（宽度和高度）的方式与容器宽度的缩放方式相同。 图像是否始终需要与右侧齐平，图像上方和下方是否始终需要相等的空间？ 是的。 甚至需要内部 div 吗？ 在这个例子中不需要，但在真正的问题中它确实有一个功能。

【解决方案4】：

我建议一个仅针对 Safari 的 JS 解决方案，获取 .outer 的宽度，根据该宽度计算顶部边距并将其应用于您的 .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 时遇到了一些麻烦 - 我认为它会妨碍检测浏览器。查看示例页面here。

希望对您有所帮助。

【讨论】：

另外，如果您的网站是响应式的并且 .outer 宽度可能会发生变化，我会考虑使用 $(window).resize...

【解决方案5】：

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

margin: calc(100vw * .50);

【讨论】：