Question

我有一些div设置为宽度：我网站上的100％：

<div id="participate" class="test">
  participate
</div>

<div id="description" class="test">

  <div id="brief" style="display:table-cell">
&nbsp;
  </div>

  <div id="price" style="display:table-cell">
&nbsp;
  </div>

</div>

<div id="bottom" class="test">

  <div id="partners" class="test">
&nbsp;
  </div>

  <div id="content" class="test">
&nbsp;
  </div>

</div>

只有#bottom设置了display：table。当我设置边框时，我看到#border比其他div小2px。

当我设置#border宽度：100.3％时，这是正常的，但这个解决方案似乎已经向我推迟了。问题出现在铬中，而在Firefox中则不存在。

为什么会这样，我怎么能摆脱它？

任何提示都会受到赞赏。

Answer 1

https://developer.mozilla.org/en/CSS/box-sizing

div元素默认为box-sizing: content-box，其中border s 不是 width的一部分。

在Chrome中，设置display: table强制box-sizing: border-box，其中的边界是width的一部分。

此处显示：http://jsfiddle.net/thirtydot/wsEkc/

使两个div保持一致的最简单方法是应用box-sizing: border-box（及其供应商前缀变体）。

请参阅： http://jsfiddle.net/wsEkc/3/

div宽度：100％是不同的

1 个答案: