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>

现在，忘记在提供边框后需要应用的其他计算。现在，您的边框宽度将包含在“width”属性中。因此，您可以简单地将第一个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

Answer 2

边框是两边，所以1px（左）+ 1px（右）= 2px（每div总数）。

因此尝试将第二个div设置为198px，将第三个div设置为188px。

如果问题仍然存在，请再次尝试稍微降低。

Answer 3

标题3也应该

 display: inline-block

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

3 个答案: