这是示例 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是新的行。
需要更改什么才能在所有浏览器中看到相同的内容。
首先，在你的"style"标签中提供此属性，
<style>
div {box-sizing: border-box}
</style>
现在，忘记提供边框后需要应用的其他计算。现在，边框宽度将包含在"宽度"属性本身中。因此，您可以简单地将第一个div的宽度设置为200px，将第二个div的宽度设置为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>
有关调整框大小的详细信息，请参阅以下内容：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
边框是两侧，因此 1px（左）+ 1px（右）= 2px（每个div 的总和）。
因此，请尝试将第二个div设置为198px，将第三个div设置为188px。
如果问题仍然存在，请再次尝试稍微低一点。
标题 3 也应该有
display: inline-block