div与width：100％不同 [英] div with width:100% are different

问题描述

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

 < div id = class =test> 
 participate 
< / div> 
 
< div id =descriptionclass =test> 
 
< div id =briefstyle =display：table-cell> 
& nbsp; 
< / div> 
 
< div id =pricestyle =display：table-cell> 
& nbsp; 
< / div> 
 
< / div> 
 
< div id =bottomclass =test> 
 
< div id =partnersclass =test> 
& nbsp; 
< / div> 
 
< div id =contentclass =test> 
& nbsp; 
< / div> 
 
< / div> 
  

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

当我设置#border宽度：100.3％这是确定，但是这个解决方案似乎重新启动我。

为什么会这样，如何摆脱它？

任何提示都将受到赞赏。

解决方案

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

div 元素默认为 box-sizing：content-box ，其中 border

在Chrome中， 设置 display：table 强制 box-sizing：border-box ，其中边框 > width 部分。

如下所示： http://jsfiddle.net/thirtydot/wsEkc/

最简单的方法是两个 div 的一致是应用 box-sizing：border-box （及其供应商前缀变体） p>

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

I have some divs all set to width:100% on my website:

<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>

Only #bottom has set display:table. When I set border I see #border is smaller excatly 2px than others div.

When I set #border width:100.3% it is ok however this solution seems retarted to me. The problem is present in chromium and absent in firefox.

Why is that and how can I get rid of it?

Any hint'll be appreciated.

解决方案

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

div elements default to box-sizing: content-box, in which borders are not part of the width.

In Chrome, setting display: table forces box-sizing: border-box, in which the borders are part of the width.

This is shown here: http://jsfiddle.net/thirtydot/wsEkc/

The easiest way to make the two divs consistent is to apply box-sizing: border-box (and its vendor prefixed variants).

See: http://jsfiddle.net/wsEkc/3/

这篇关于div与width：100％不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！