div with width:100% are different
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">
</div>
<div id="price" style="display:table-cell">
</div>
</div>
<div id="bottom" class="test">
<div id="partners" class="test">
</div>
<div id="content" class="test">
</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 border
s 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 div
s consistent is to apply box-sizing: border-box
(and its vendor prefixed variants).
See: http://jsfiddle.net/wsEkc/3/
精彩评论