我正在开发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>
解决方法
这里的问题是宽度是文本的内部区域的大小,边框的填充在其周围被“包裹”.该规范没有任何意义,但大多数现代浏览器都遵循它.
你的救主叫做箱子大小：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
