<div> 上的 CSS 边框行为不同？答案

【问题标题】：CSS border on a <div> acts differently?<div> 上的 CSS 边框行为不同？
【发布时间】：2010-08-30 00:18:46
【问题描述】：

标题可能有点不清楚，所以这里是我的意思的截图：

HTML & CSS Sourcecode

所有元素都使用相同的 CSS 类，所以它们不应该都具有相同的宽度吗？边界越大，差异就越大。如何确保 div 和其他元素具有相同的宽度？

提前致谢！

【问题讨论】：

标签： html css

【解决方案1】：

这是因为表单元素和普通 HTML 元素之间的框大小不同。如果它不是表单元素，则使用的盒子模型是 W3C 用来宣传的一种，其中边框和填充添加到集合 width 属性以使其大于您指定的。

如果您不关心旧版浏览器支持（IE

div.style {
    /* By default, browsers would have set this as content-box */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

您的边框（以及任何现有的水平填充）将成为您的<div> 的width 属性的一部分。

反之亦然，而不是上述方法：

button.style, textarea.style {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

同样，这些属性仅受现代浏览器支持。

【讨论】：

感谢您的回复，所以这就是您更改 div 的方式...我也可以反过来做并更改其他以匹配 div 吗？
@Chris：我已经更新了我的答案。不过我还没试过。
非常感谢，非常感谢 :-)
在 chrome 中，我必须将 css 属性直接设置为 div。 div.style 至少在 chrome 中不起作用。无论如何感谢@BoltClock的解决方案。