45

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

3 回答 3

73

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

有关此属性的更多信息，请点击此处和此处。

于 2013-08-03T09:31:00.513 回答
5

是的，你是对的，边框正在推出元素的“宽度”。这是现代浏览器的默认框大小。这可以在大多数情况下使用如下声明进行修改：

.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：box-sizing: border-box如果使用 min/max-width/height 则忽略
  • IE8：该min-width属性适用于content-box即使box-sizing设置为border-box
  • IE9：滚动条的宽度从元素的宽度中减去，当设置为position: absoluteand 或者overflow: autooroverflow-y: scroll

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

于 2013-08-03T09:31:12.737 回答
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/

于 2013-08-03T09:56:57.757 回答