具有位置的边框框：固定在 FireFox 中不显示填充答案

【问题标题】：border-box with position:fixed doesn't show padding in FireFox具有位置的边框框：固定在 FireFox 中不显示填充
【发布时间】：2014-11-01 15:28:31
【问题描述】：

// 编辑：在此处查看此小提琴：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; 不起作用？

【问题讨论】：

您的实际问题是什么？底部 20px 的填充显示得很好。另外，不要使用内联样式。我用 CSS 部分中的样式做了一个演示，因为它们应该是 here
我使用的是 FF v30，对我来说填充不会出现。您使用什么浏览器/操作系统？
我明白了。您应该在发布之前测试跨浏览器：P 我在 Chrome 37 上
不知道为什么 Firefox 不喜欢这个……但会提供 div:after { display:block; content:""; height:20px; } 作为快速修复响应。解决方法。
@CBroe 看到你所做的改动：jsfiddle.net/hotu2n91/2 如你所见，没有任何改变

标签： css firefox navigation css-position border-box

【解决方案1】：

您可以尝试将其包装成.wrapper 这是示例。然后它就会成为一种魅力。我怀疑 ff 无法正确测量高度，然后无法设置填充。这就是包装器的作用。这是我的猜测。而且ff遇到类似问题也不是第一次了。

JSFIDDLE

【讨论】：