我正在开发vBulletin主题,但在线程列表中,每个线程的宽度都为100％,但线程也大于父级,但是当我删除线程的边框时,它们将适合父级的div :).所以认为这个问题在边界上.
你可以看到更好的jsfiddle(线程是黑色边框的白色形状)
@H_301_4@<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.
@H_301_4@.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
