输入宽度，填充不匹配

Question

我有一个快速而有趣的问题。 应用于输入标记的填充不会添加输​​入的宽度，而是相减。

在打印屏幕中，您可以看到.acct_input_bg元素的宽度为390px。 在DevTool的盒子模型实用程序中，元素有363px（390 - 20 - 7）！

我google了一下，发现Paul Irish blogged about the problem，但我有boostrap.css，它应用了适当的box-sizing元素。我还发现this query and this中的stackoverflow对此没什么帮助。

感谢您的帮助！

Answer 1

这是由Bootstrap造成的 The default box sizing is content-box，Bootstrap正在将其更改为border-box，这就是您所看到的行为。

查看the source code：

// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}

Answer 2

使用它：

-webkit-box-sizing: content-box !important;