100% 宽度大于父 div答案

【问题标题】：100% width is bigger than parent's div100% 宽度大于父 div
【发布时间】：2013-08-04 13:51:53
【问题描述】：

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

【问题讨论】：

标签： html css width

【解决方案1】：

当您遇到与通过 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/

【讨论】：

【解决方案2】：

这里的问题是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 的更多信息。

【讨论】：

正是我需要的答案。我的救命恩人！

【解决方案3】：

是的，你是对的，边框正在推出元素的“宽度”。这是现代浏览器的默认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 上列出的其他问题在未来将不再是问题。

【讨论】：

Ctrl+C master，但他没有设置 textarea 的样式 :P @ via css-tricks.com/box-sizing
很明显！不喜欢只发布一个指向小提琴的链接，然后多次编辑我的答案。 ;) 也必须成为提出问题的人的一些实践和学习要素。
哦，是的，但是在复制的 sn-p 中将 textarea 替换为 .threadbit .thread 肯定不会有什么坏处？
那篇文章似乎已经过时了：浏览器支持。 Chrome 和 FF 支持无前缀 box-sizing 有一段时间了。
为@cHao 的信息干杯，更新了帖子以反映更新的浏览器支持。显然虽然FF still isn't unprefixed.