在Chrome和Firefox中，高度呈现不同。

9 浏览
0 Comments

在Chrome和Firefox中，高度呈现不同。

如果我们将一个块级元素设置为height:auto或height:0~100%，而没有显式设置父元素的高度，并且它的块级子元素具有底部外边距，那么在Chrome中会以不同的方式计算高度，但在Firefox中不会。对于设置height:1%的情况：\nhttp://codepen.io/anon/pen/BjgKMR\n

html {
  background: pink;
}
body {
  background: yellow;
}
div {
  height: 1%;
}
inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

\n

  
块级元素

\n

的高度将被计算为margin-bottom + p元素的内容高度。我对为什么height:1%应该被计算为auto，因为父元素（html和body标签）没有显式设置高度，但是当我们直接将高度设置为auto时，它们的高度却不同感到困惑。\n如果我们直接将其设置为height:auto，它将明显地将高度设置为其子块级元素的高度，不包括底部外边距。\n

html {
  background: pink;
}
body {
  background: yellow;
}
div {
  height: auto;
}
inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

\n

块级元素

\n我阅读了CSS 2.1规范，认为我的问题可能与高度属性和外边距折叠主题有关，但仍然无法理解为什么在Chrome ver. 47.0.2526中表现不同，而Firefox ver. 44.0.2将显示相同的高度。\n列出的参考资料：
\nhttps://www.w3.org/TR/CSS2/visudet.html#the-height-property\n

    \n

  • 10.5：百分比\n

    \n...如果包含块的高度没有明确指定（即它取决于内容的高度），并且此元素没有绝对定位，则该值计算为“auto”...\n

    • \n

  • 10.6.3：正常流中的块级非替换元素，当overflow计算为visible时。\n

    \n...如果“height”为“auto”，则高度取决于元素是否具有任何块级子元素以及它是否具有填充或边框：\n元素的高度是从其顶部内容边缘到以下第一个适用的距离：\n

      \n

    1. 最后一行框的底部边缘，如果该框与一行或多行建立内联格式化上下文

      2. \n

    2. 其最后一个流动子元素的底部（可能折叠）外边距的底部边缘，如果子元素的底边距与元素的底边距不折叠

      3. \n

    3. 不与元素的底边距折叠的最后一个流动子元素的底部边框边缘

      4. \n

    4. 否则为零

      5. \n

    \n

    • \n

\nhttps://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margins\n

    \n

  • 8.3.1 折叠外边距。\n

    \n如果流动块元素的顶外边距没有顶部边框、顶部填充和子元素的清除，则它的顶外边距与其第一个流动块级子元素的顶外边距折叠。\n具有“height”为“auto”和“min-height”为零的流动块框的底外边距与其最后一个流动块级子元素的底外边距折叠，如果框没有底边距和底边框，且子元素的底外边距与具有清除的顶外边距不折叠。\n...如果一个框的顶部和底部外边距相邻，那么外边距可以通过它进行折叠。在这种情况下，元素的位置取决于其与正在折叠外边距的其他元素的关系。\n

      \n

    • 如果元素的外边距与其父元素的顶部外边距折叠，则框的顶边框边缘被定义为与父元素的相同。

      • \n

    • 否则，要么元素的父元素不参与外边距折叠，要么只有父元素的底外边距参与其中。元素的顶边框边缘的位置与如果元素具有非零底边框时的位置相同。

      • \n

    \n

    • \n

0

1 答案

0 Comments

浏览器中高度在Chrome和Firefox中呈现不同的问题是由于以下原因：

1. 标准规范（W3C standards）：这是浏览器制造商的一组指南，但浏览器制造商可以自由进行一些更改和调整，这导致不同的浏览器对CSS百分比高度的行为存在明显的差异。

2. CSS百分比高度在flexbox中的表现不同：Chrome和Safari根据父元素的height属性来解析flex项目上的百分比高度，而Firefox和IE11/Edge则优先考虑父元素的flex高度。这导致了在不同浏览器中，flexbox中的百分比高度的行为不一致。

3. 根据规范的传统解释：对于内联流动（in-flow）子元素要使用百分比高度，父元素必须具有设置的高度，这是规范的传统解释。然而，最近Firefox和IE也扩展了他们的解释，接受了flex高度的使用。

因此，在浏览器中，不同的解释和实现方式导致了高度在Chrome和Firefox中呈现不同的问题。

解决这个问题的替代方法有两种：

1. 在父元素上应用display: flex属性，这会自动设置align-items: stretch属性，告诉子元素展开父元素的完整高度。

2. 在父元素上应用position: relative属性，在子元素上应用position: absolute; height: 100%; width: 100%属性。使用绝对定位，百分比高度可以在没有指定父元素高度的情况下工作。

在没有更新规范定义之前，可以预期不同浏览器之间在百分比高度方面存在渲染差异。

0