3

我以前问过这个问题，但我想我会更清楚。似乎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 定位为浏览器的方法，以便我可以为样式表设置自定义值？

4

1 回答 1

4

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

于 2013-06-30T09:53:48.033 回答