HTML/CSS div 宽度 px 在不同的浏览器中看到不同的结果

Question

这是例子http://jsfiddle.net/matq8eb2/1/

在 FF 和 IE 中看到的是预期的。在 Chrome 和 Opera 中，另一个(意想不到的)结果。

有一个包含 3 个 div 的“容器”div。

每个 div 都有边框 border:solid 1px; 据我所知，边框宽度是 1px。

第一个 div 宽度为 width:390px;

我希望第二个和第三个 div 的总宽度看起来与第一个 div 的宽度相同。

第二个 div 宽度是 width:200px; 加上边框 1px，所以 div 就是 201px

第三个 div 宽度是 width:188px; 加上边框 1px，所以 div 就是 189px

201 + 189 将是 390。所以在第一行中期望看到第一个 div，在第二行中看到 2 个 div(第二个和第三个)。

这是代码

<div class="" id="body" style=" display:inline-block; background-color:#ff0000; ">

<div class="element" id="header1" style="display:table; width:390px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 1
</div>

<div class="element" id="header2" style="float:left; display:table; width:200px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 2
</div>

<div class="element" id="header3" style="display:table; width:188px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 3
</div>    

</div>    

有了 FF 和 IE，我看到了我所期望的。但是对于 Chrome 和 Opera，第三个 div 是在新行中。

需要更改什么才能在所有浏览器中看到相同的内容。

Answer 1

首先，在您的“style”标签中提供此属性，

<style>
div {box-sizing: border-box}
</style>

现在，忘记在提供边框后需要应用的其他计算。现在您的边框宽度将包含在您的“宽度”属性本身中。因此，您可以简单地提供第一个 div 的宽度为 200px，第二个为 190px。

因此您现在可以按如下方式设置代码:

<div class="" id="body" style=" display:inline-block;background-color:#ff0000; ">

<div class="element" id="header1" style="display:table; width:390px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 1
</div>

<div class="element" id="header2" style="float:left; display:table; width:200px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 2
</div>

<div class="element" id="header3" style="display:table; width:190px; border:solid 1px; border-color:#f1f1f1; background-color:#fff; ">
Header part 3
</div>    

</div>

有关 box-sizing 的更多信息，请参阅: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp