Css 绝对定位项目的百分比保证金计算不一致

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

我们不能使用“底部：5%”，因为这是相对于高度的。保证金呢？对它在铬上工作。。还有Firefox。啊，但不是在狩猎中。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%;
}

有人知道这只虫子在哪里吗？在狩猎中？Chrome/Firefox？规格

---

快速检查表明，填充可能会持续工作，但对于那些想要使用边距（即当背景开始发挥作用时）的人来说并不理想。

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

检查它：

所以，基本上，你被困在这个bug里了。然而，我建议使用一些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中实现这一点时遇到了一些问题，因此我创建了一个页面

---

希望有帮助

我在Android浏览器上也遇到了同样的问题，通过在子元素上添加边距就可以解决这个问题

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

---

关键是不要在绝对定位的元素上留空白。

我认为Windows7Mac:10.8.2、Chrome:27.0.1453.93、Safari:6.0.2（8536.26.17）上的Safari/Chrome/Firefox没有问题

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