Safari不像其他浏览器那样呈现margin-top％值

Question

之前我曾问过这个问题，但我想我会更清楚。似乎％margin-top％的值在Safari上显示的不同，就像在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定位为浏览器，以便我可以为样式表设置自定义值？

Answer 1

是的，根据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仅在页面加载时更改边距 - 如果您手动拖动浏览器窗口的边缘，它将不会动态更改;你需要刷新页面。不确定您是否需要该功能。如果你这样做，请告诉我，我会看看。