铬填充百分比+宽度百分比不加在一起

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 width属性将包括边框和填充。

Answer 2

尝试-webkit-box-sizing，可能会导致问题。

CSS Tricks

的更多信息