html - 宽度为 :100% are different 的 div

Question

我的网站上有一些 div 全部设置为 width: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 width:100.3% 时没问题，但是这个解决方案对我来说似乎很麻烦。该问题在 chromium 中存在，而在 firefox 中不存在。

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

任何提示都将不胜感激。

Answer 1

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

div元素默认为box-sizing: content-box，其中border不是部分宽度。

在 Chrome 中，设置 display: table 会强制 box-sizing: border-box，其中边框是 宽度。

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

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

参见: http://jsfiddle.net/wsEkc/3/