Question

//编辑：请看这个小提琴：http://jsfiddle.net/hotu2n91/正如您所看到的，这与最小测试环境存在相同的问题

我在定位导航时遇到问题。在您阅读时，您可以在此处查看问题：http://jsfiddle.net/vgugd8no/

*{
    margin:0;
    padding:0;
}
body, html{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.overlay{
    position:fixed;
    background:blue;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}  
    .overlay .content{
        width:100%;
        height:400px;
        background:yellow;
        border-right:10px solid black;
    }
    .overlay .navigation{
        position:fixed;
        top:0;
        left:0;
        width:300px;
        height:100%;
        overflow:auto;
        background:green;
        /* !IMPORTANT */
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        z-index:10;
        padding-bottom:20px;
    }

正如您所看到的，我有一个position:fixed;叠加层和一个带有position:fixed;的导航栏。现在我想从导航中删除例如20px，但保持100％。所以价值将是100％-20px。这是box-sizing:border-box;的用途。但目前它不适用于FireFox，我需要一些帮助。我想调整导航，使其不会与内容滚动条重叠。为什么我的box-sizing:border-box;不起作用？

Answer 1

您可以尝试将其封装到.wrapper这里是示例。那么它将成为一种魅力。我怀疑ff不能正确地测量高度然后它不能设置填充。这就是包装器的用途。这是我的猜测。当ff遇到类似问题时，这不是第一次。

JSFIDDLE

具有位置的border-box：fixed在FireFox中不显示填充

1 个答案: