<div>上的CSS边框有何不同？

Question

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

HTML和CSS源代码

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

提前致谢!

Answer 1

这是因为表单元素和普通HTML元素之间的框大小不同.如果它不是表单元素,则使用的框模型是W3C用来传播边框和填充添加到set 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您房产的一部分<div>.

反过来做,而不是上述:

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

同样,这些属性仅受现代浏览器支持.