Safari无法像其他浏览器一样渲染margin-top %值

Question

Safari无法像其他浏览器一样渲染margin-top %值

3

我之前问过这个问题，但是我想我需要更清楚地表述。在Safari上，使用百分比值的margin-top与Chrome、Firefox和IE上不一样。在像素（px）中显示正确，margin-left的百分比也是如此。

这里有一个例子可以进行比较：Fiddle

* {
   margin:0;
   padding:0;
 }

.A {
   background-color: blue;
   height: 200px;
   position:relative;
 }

.B {
   left: 50px;
   margin-top:15%;
   width:20px;
   height:20px;
   background-color: red;
   position:absolute;
}

我需要在响应式设计中使用margin-top的%值。使用top无法根据窗口大小缩放对象。

是否已知有问题，如果有（可能是一个大问题），是否有一种只针对Safari浏览器的方法，以便我可以在样式表中设置自定义值？

- chucky

你的Safari版本是什么？在我的电脑上可以用。顺便说一下，如果你想根据窗口大小调整对象的比例，可以使用“relative”和“top”。 - Can Geliş

最新版本。即使您将两个浏览器并排打开？当进行比较时，红色块的位置是不同的。 - chucky

你是对的，Chrome根据窗口大小来排列位置，但Safari根据容器来排列位置。我认为Safari是正确的，因为位置是绝对的，其他浏览器的工作方式是错误的。我认为你应该改变你的工作方式。这个例子在Chrome和Safari上运行相同。 - Can Geliş

我需要使用 margin-top，因为对象在调整大小时会根据其宽度正确缩放，如此处所示：http://jsfiddle.net/fsR6A/。 - chucky

我认为Safari有误：margin %：'相对于包含块的宽度的<百分比>。'- Mozilla开发者。在我上面的示例中，它的行为类似于“top”属性。 - chucky

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luke · Accepted Answer

根据W3C标准，使用百分比定义的边距应该计算相对于包含块的宽度。参考：(http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties)。然而，Safari似乎将上/下边距百分比计算相对于包含块的高度，这更有逻辑意义，但与W3标准不符。我认为没有CSS解决方案。您可以尝试一些jQuery仅针对Safari，获取div.A的宽度并用它来计算div.B的margin-top。类似这样的代码：

    var width = $('.A').width();
    var topMargin = width * 0.15;
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {                  
        $('.B').css('margin-top', topMargin+'px')
    }
    else {
    };;

这是一个示例页面：http://www.indieweb.co.nz/testing/safari-margin-percentage.html 注意：此JS仅在页面加载时更改边距-如果您手动拖动浏览器窗口的边缘，它不会动态更改；您需要刷新页面。不确定您是否需要该功能。如果需要，请告诉我，我会查看。