2

我有一种情况，我在一般容器中有一个“底部”内容 div。这个 div 应该保持在底部（具有绝对定位），但与容器底部有一个百分比间隙。百分比应该相对于容器的宽度。

我们不能使用 'bottom:5%' 因为位置道具定义它是相对于高度的。保证金呢？是的！它适用于 Chrome .. 和 Firefox。啊，但不是在 Safari 中。似乎 Chrome 和 Safari 根据容器宽度和 Safari 的容器高度计算它。

在 Chrome 和 Safari 中看到这个小提琴，你会看到不一致的地方。CSS 样式：

.container {
    background: #990000;
    width: 345px;
    height: 200px;
    position: relative;
}
.bottom {
    background: #000;
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    margin-bottom: 5%;
}

任何人都知道错误在哪里 - 与 Safari？铬/火狐？规格？

快速检查显示填充可能始终如一地工作，但对于那些想要使用边距的人来说并不理想（即当背景发挥作用时）。

4

2 回答 2

2

问题在于 Safari。W3C 标准规定，使用百分比定义的边距应根据包含块的宽度（而不是高度）计算。

检查它：http ://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties

所以基本上，你被这个错误困住了。但是，我建议使用一些 JS 来定位 Safari，获取容器的宽度并应用该宽度的百分比作为边距。

例如：

    var width = $('.container').width();    // get the width of div.container
    var bottomMargin = width * 0.05;       // multiply the width by 0.05 to get 5% of the container width

    // look to see if the browser is Safari
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {                  
        $('.bottom').css('margin-bottom', bottomMargin+'px');   // apply our margin to div.bottom
    }
    else {
    };;

我在 JS Fiddle 中实现这一点时遇到了一些麻烦，所以在这里创建了一个页面。

希望有帮助！

于 2013-07-12T04:21:19.610 回答
0

我在使用 Android 浏览器时遇到了同样的问题，并且能够通过将边距放在子元素上来解决它。

.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}
.bottom-child {
    height:100%;
    margin-bottom: 5%;
    background: #000;
}

关键是不要将边距放在绝对定位的元素上。

于 2013-07-24T17:43:25.323 回答