我正在研究vBulletin主题,但在线程列表中,每个线程的宽度都是100%,但线程也比它们的父级大,但是当我删除线程的边界时,它们将适合父级的div :).所以认为这个问题是在边界上.
你可以在jsfiddle上看到更好的东西(线是带黑色边框的白色形状)
<body>
<div class="after-body">
<div class="body-wrapper">
<div class="threadlist">
<ol class="threads">
<li class="threadbit"><div class="thread"></div></li>
<li class="threadbit"><div class="thread"></div></li>
</ol>
</div>
</div>
</div>
</body>
Mig*_*ork 56
这里的问题是width内部区域的大小是带有文本的,带边框的填充是"缠绕"在它周围.该规范毫无意义,但大多数现代浏览器都遵循它.
你的救世主被称为box-sizing: border-box;.
.threadbit .thread {
/* ... some stuff ... */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
看这里:jsFiddle
是的，你是对的，边框正在推出元素的“宽度”。这是现代浏览器的默认框大小。这可以在大多数情况下使用如下声明进行修改：
.threadbit .thread {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
请注意，它在 IE8 下不受支持，因此根据您正在制作的内容和您想要的支持，您可能需要找到替代解决方案或设计。
编辑
自从我的原始答案和浏览器支持略有变化以来已经有一段时间了。Firefox 29、Chrome 10、Safari 5.1 和 Internet Explorer 8 以后都支持不带box-sizing前缀的，但特定版本存在一些已知问题。
完整/最新列表可在caniuse.com上找到，但这里有一些我从网站上发现的重要列表：
box-sizing: border-box是否使用最小/最大宽度/高度min-width属性适用于content-box即使box-sizing设置为border-boxposition: absoluteandoverflow: auto或overflow-y: scroll随着 IE8 和 IE9 的市场份额下降，这些问题和其他在 caniuse 上列出的问题在未来将不再是问题。
永远记住，当您遇到与宽度相关的问题时，请通过 Firefox 开发人员工具或 chrome 的 metrix box 中的盒模型检查元素的尺寸。包含在内始终是一个好主意
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
还要确保检查显示属性。如果一个元素以内联方式显示，则它不会采用宽度、边距和填充值；如果它显示为内联块，则它会采用宽度、边距和填充值。
这是 box-sizing 属性的链接http://www.paulirish.com/2012/box-sizing-border-box-ftw/