在Chrome和Firefox中渲染不同的高度[副本]

Question

我发现，如果我们设置一个块级元素的高度为height:auto或height:0~100%而没有设置父级的高度为显式值，并且它的块级子级有底部边距，那么它在Chrome中会计算不同的高度，而在Firefox中则不会。对于设置高度:1%的情况：

http://codepen.io/anon/pen/bjgkmr

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: 1%;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div>
  <p class="inner">block level element</p>
</div>

div块的高度将计算为margin-bottom+pelement的内容高度。我很困惑为什么height:1%应该和auto一样计算，因为父元素(html和body标记）没有显式地设置它的高度，而是有不同的高度，因为我们只是直接将高度设置为auto？

如果我们直接将其设置为height:auto，那么它显然只是将高度设置为其子块级元素的高度，而不包括其底部边距。

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: auto;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div><p class="inner">block level element</p></div>

我已经阅读了CSS2.1规范，并考虑了我的问题可能覆盖了高度属性和边距折叠主题，但仍然不能理解为什么它在Chrome Ver中表现不同。47.0.2526，但Firefox ver.44.0.2将显示具有相同值的高度。

列出的引用:
https://www.w3.org/tr/css2/visudet.html#the-height-property

>

10.5:百分比

...如果未显式指定包含块的高度（即，它取决于内容高度），并且该元素未绝对定位，则该值计算为“auto”。...

10.6.3:当溢出计算为可见时，正常流中的块级未替换元素。

...如果“height”为“auto”，则高度取决于元素是否具有块级子元素以及是否具有填充或边框：

元素的高度是从其内容顶部边缘到以下第一个适用边缘的距离：

1. “最后一行”框的下边缘，如果该框建立了包含一行或多行的内联格式上下文
2. 如果子级的底边距未与元素的底边距一起折叠，则其最后一个流入子级的底边距（可能折叠）的底边距
3. 上边距不随元素的下边距折叠的最后一个流入子项的下边框边缘
4. 为零，否则

https://www.w3.org/tr/2011/rec-css2-20110607/box.html#折叠-边距

>

8.3.1折叠边距。

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

如果“高度”为“自动”且“最小高度”为零的流入块框没有底部填充和底部边框，并且子框的底部边距没有与具有间隙的顶部边距一起折叠，则该流入块框的底部边距将与其最后一个流入块级别的子框的底部边距一起折叠。

…如果一个框的上页边距和下页边距相邻，那么页边距就有可能通过它折叠。在这种情况下，元素的位置取决于它与边距被折叠的其他元素的关系。

• 如果元素的边距与其父元素的上边距一起折叠，则框的上边框边缘将定义为与父元素的边框边缘相同。
• 否则，要么元素的父元素没有参与边距折叠，要么只涉及父元素的底部边距。元素的上边框边缘的位置与元素具有非零的下边框时的位置相同。

Answer 1

首先，您有了W3C标准，这是浏览器制造商的一套指导原则。

然后是浏览器制造商，他们可以自由地做他们想做的任何事情（Internet Explorer的错误历史证明了这一点）。

特别是，使用CSS百分比高度，浏览器之间的行为有明显的差异。

看来Webkit浏览器坚持对规范的更传统的解释：

CSS高度属性

百分比
指定百分比高度。该百分比是相对于生成的方框的包含块的高度计算的。如果未显式指定包含块的高度，并且该元素未绝对定位，则该值计算为“auto”。

Firefox和IE使用父级的弹性身高作为子级百分比身高参考的示例：

• 列布局中的Chrome忽略flex-basis
• Chrome/Safari未填充flex父级的100%高度
• Chrome中flexbox项目的高度不正确
• Chrome中的FlexBox--如何限制嵌套元素的大小？

知道哪些浏览器符合规范是有点困难的，因为，正如我前面提到的，spec语言似乎很模糊，可以解释。

>

将display:flex应用于父级。这会自动设置align-items:streting，它告诉子级扩展父级的全部可用高度。

在父级上应用位置：相对和位置：绝对；身高：100%；子级上的宽度:100%。对于绝对定位，百分比高度将在父级上不指定高度的情况下起作用。