绝对定位项目的利润率计算不一致

Question

我有一个情况，我有一个'底部'内容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的bug在哪里吗?Chrome/火狐?规范?

快速检查显示填充可能一致工作，但对于那些想要使用边距(即当背景发挥作用时)的人来说，这不是理想的。

Answer 1

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

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

所以基本上，你被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中实现这个有一些麻烦，所以我在这里创建了一个页面。

希望有帮助!

Answer 2

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

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

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