html - <div> 上的 CSS 边框表现不同？

Question

标题可能有点不清楚，所以我的意思截图如下:

HTML & CSS Sourcecode

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

提前致谢!

Answer 1

发生这种情况是因为表单元素和普通 HTML 元素的框大小不同。如果它不是表单元素，则使用的框模型是 W3C 用来宣扬边框和填充添加到集合 width 的模型。属性使其大于您指定的大小。

如果您不关心旧版浏览器支持(IE < 8 等)，您可以这样做:

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;
}

并且您的边框(以及任何现有的水平填充)将成为 width 的一部分你的属性(property)<div> .

要反过来做，而不是上面的方法:

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

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