为什么 Chrome 和 Firefox 对百分比和'自动”值的渲染高度不同？

Chrome 和 Firefox 中的高度呈现方式不同

在 CSS 中，将块级元素的高度设置为百分比或“自动”，而不指定父元素的高度可能会导致不同浏览器的高度计算不同。例如，Chrome 和 Firefox 表现出不同的行为。

为什么“height: 1%”计算为 Auto

在 height: 1% 的示例中，Chrome 将 div 的高度计算为margin-bottom 加上 p 元素的内容高度。这是因为，根据 CSS 规范，当父级的高度未显式设置且元素未绝对定位时，将计算“auto”百分比。

父级的 Flex 高度

另一个Chrome 和 Firefox 之间的差异在于它们对 Flexbox 中百分比高度的处理。 Chrome 和 Safari 优先考虑父级的伸缩高度，而 Firefox 和 IE11/Edge 优先考虑父级的整体高度。

浏览器解释

CSS 规范中有关高度百分比的语言有些模糊，留有解释空间由浏览器制造商提供。传统的解释要求在父级上设置一个高度值，然后是 Chrome 和 Safari 等浏览器。但是，Firefox 和 IE 已扩展此解释以包括弹性高度。

替代解决方案

为了确保跨浏览器的高度渲染一致，请考虑以下替代方案：

• 使用在父级上显示：flex和在子级上对齐项目：拉伸以将子级的高度设置为完整的父级高度。
• 在子级上应用位置：绝对高度：100% 和宽度：100%，同时在父级上设置位置：相对。

以上是为什么 Chrome 和 Firefox 对百分比和'自动”值的渲染高度不同？的详细内容。更多信息请关注PHP中文网其他相关文章！