当前位置: 首页 > 知识库问答 >
问题:

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

栾瑞
2023-03-14

我发现,如果我们设置一个块级元素的高度为height:autoheight: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一样计算,因为父元素(htmlbody标记)没有显式地设置它的高度,而是有不同的高度,因为我们只是直接将高度设置为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折叠边距。

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

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

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

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

    马华茂
    2023-03-14

    首先,您有了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%。对于绝对定位,百分比高度将在父级上不指定高度的情况下起作用。

  •  类似资料:
    • 问题内容: 我正在使用jQuery滑块来调整包含段落文本的DIV的填充。当我在所有方向上均等地增加填充时,它应将随附的段落强制插入页面中央越来越窄的列中。 这在Firefox中有效,但在Chrome中段落宽度保持不变(即,随着DIV的填充物压入它们,它们的宽度不会变窄),因此将布局向右推。 我在这里重新创建了这个问题。您可以在Chrome和Firefox中尝试一下以了解其区别。 关于如何强制Chr

    • 问题内容: 为什么Chrome中的高度大于Firefox的输入高度 问题答案: 问题本质上是。 Chrome的外观与Firefox 相似。 在输入中增加高度应该可以解决问题,尽管您应注意和匹配。 例如:。

    • 问题内容: 在chrome 47上(正确的行为): 在chrome 47上,div 正确滚动,使用flex调整高度为100%。 在Firefox(错误的行为)上: 在Firefox上,与div一起使用的是内容高度,并且滚动不正确。 跨浏览器解决此问题的方法是什么? 已更新问题, 以区分Chrome 47和Chrome 48。 问题答案: 更新了flexbox规范,使flex项目的默认最小大小等于内

    • 本文向大家介绍如何解决input在Firefox和Chrome中高度不一致的问题?相关面试题,主要包含被问及如何解决input在Firefox和Chrome中高度不一致的问题?时的应答技巧和注意事项,需要的朋友参考一下 原因是firefox的input的border-width padding 受win10系统的文本大小设置影响 设置一样的样式 将win10 系统的文本大小设置为100%

    • 问题内容: 有什么方法可以在不渲染实际元素的情况下获得文本宽度的估算值?像画布TextMetrics一样? 案例:我需要估计ReactList的元素高度。为此,我需要大致知道文本元素将需要多少空间(或它们将跨越多少行)。 例如。 如果我知道someText将被渲染成一行的宽度以及该行的长度,那么我可以很容易地得出组件高度的合理估计。 编辑:请注意,这是非常重要的性能, 不应触碰DOM 问题答案:

    • 但是,它在Safari中并不起作用。但是如果我们将中的高度从更改为,我们将观察到拆分器(从上到下到)变得可拖动。这意味着在Safari中不起作用。 有没有人知道如何修改代码,使拆分器在Chrome和Safari中都能工作? 编辑1: