0

在我们的一个项目中，我们注意到所有主要浏览器（Firefox 22.0、Chrome 28.0.1500.72 m、IE 10.0.9200.16521）中的以下奇怪计算

考虑以下 HTML 代码：

<div>
    <div style="height:100px">Head</div>
    <div style="height:200px">
        <p style="margin:10px">This goes wrong</p>
        Wrong wrong wrong
    </div>
</div>
<div>
    <div style="height:100px">Head</div>
    <div style="height:200px">
        Right right right
        <p style="margin:10px">This goes right</p>
        Right right right
    </div>
</div>

您还可以在以下位置找到代码示例：http: //jsfiddle.net/Cnjdg/

如果您检查 2 个顶级 DIV 的计算高度，您会发现一些奇怪的东西：DIV1 高 310 像素，而 DIV2 高 300 像素...现在逻辑告诉我 DIV 与其子级一样高（特别是因为没有特殊样式已应用）对我来说这意味着两个 DIV 元素都应该返回 300px 高度。

因此，当子元素的最顶部有一个具有上边距的元素时，在计算父元素的高度时似乎考虑了这个高度。这是一个错误吗？这是故意的吗？达到什么目的？

4

2 回答 2

1

实际上，内容为“This go wrong”的 p 实际上是在将其父级向下推，因此检查员说的是实话。我修改了你的小提琴，增加了颜色和更高的边距。现在很明显，块的高度不同，推动行为很明显。 http://jsfiddle.net/Cnjdg/1/

<div>
    <div style="height:100px; background-color: blue">Head</div>
    <div style="height:200px; background-color: red">
        <p style="margin:50px">This goes wrong</p>
        Wrong wrong wrong
    </div>
</div>
<div>
    <div style="height:100px; background-color: green">Head</div>
    <div style="height:200px; background-color: yellow">
        Right right right
        <p style="margin:50px">This goes right</p>
        Right right right
    </div>
</div>

这是有意的，而不是错误。据我所知，这并没有什么特殊目的。如果您不喜欢这种行为，您可以改用填充。

此外，边距也相互崩溃。如果父级的边距为“70px”，那么整个边距将是 70px 而不是 (70 + 50)px。如果“Head” div 的下边距为 30px。整个边距为 50 像素，而不是 (30 + 50) 像素。

如果必须使用边距，可以使用伪元素的技巧：http: //jsfiddle.net/Cnjdg/2/ 在父元素中的伪元素中......

content: "\00a0";
display: block;
height: 0;
overflow: hidden;
于 2014-01-30T10:03:30.770 回答
0

终于有一点时间，受到 davidgnin 回复的启发，我更深入地研究并深入研究了 W3C 盒模型定义。这绝对回答了我关于这是一个错误的问题吗？这是故意的吗？答案是：NO和YES

你会发现这里解释的原因，它清楚地说明了以下内容：

如果元素没有上边框、没有上边距且子元素没有间隙，则流入块元素的上边距与其第一个流入块级子元素的上边距一起折叠。

这样做的原因对我来说有点不清楚（所以我欢迎任何可以解释其背后原因的人）因此我无法回答我的问题是为了什么目的？

幸运的是，知道为什么会发生这种情况也使我们能够应对这种影响：

  1. 建立一个新的块格式化上下文，例如使用overflow:hidden
  2. 通过内边距、边框、内联元素或间隙分隔父项和子项

我希望这可以帮助遇到同样情况的人。

于 2014-01-31T12:12:07.797 回答