Question

我正在研究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>

Answer 1

这里的问题是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

有关此媒体资源的更多信息here和here。

Answer 2

你是对的，边界正在推出元素的“宽度”。这是现代浏览器的默认box-sizing。这可以通过以下声明进行修改：

.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上提供了完整/最新的列表，但是我发现这里有一些重要信息来自网站：

IE8：如果使用min / max-width / height，则忽略box-sizing: border-box

IE8：min-width属性适用于content-box，即使box-sizing设置为border-box

IE9：当设置为position: absolute并overflow: auto或overflow-y: scroll
时，滚动条的宽度将从元素的宽度中减去

随着IE8和IE9的市场份额减少，这些问题以及其他在caniuse上列出的问题在未来将不再是一个问题。

Answer 3

当您遇到与firefox开发人员工具或chrome的metrix框中的框模型的宽度检查尺寸相关的问题时，请务必记住。它总是包含

的好主意

  *, *: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/

的链接

100％宽度比父母的div大

3 个答案: