css - chrome padding percentage + width percentage 不相加

Question

在 firefox 中，我的结果符合预期。我正在尝试添加 width 和 padding 来组成完整尺寸。在 chrome 中这似乎不起作用，

.tab-content {

padding: 10px 5% 10px 5%;
width:100% !important;

在 firefox 中，这会导致它达到 110%(我所期待的)，在 chrome 中为 100%，感谢您的帮助。

Answer 1

如果您在 CSS2 中使用 100%，则意味着元素的最终宽度(不是 CSS 宽度)将为:border-left + padding-left + width + padding-right + border-right。

因此在您的情况下，它被解释为 110%:

0 + 5% + 100% + 5% + 0 = 110%

一个完美的解决方案可能是:

.tab-content {
    padding: 10px 5% 10px 5%;
    width:90%;
}

您可以使用 CSS3 的 box-sizing 属性，但由于如何解释它，它有一些错误。 我不推荐使用它。如果使用它，CSS 宽度属性将包括边框和填充。