为什么 Chrome 和 Firefox 渲染块元素高度不同？

Chrome 和 Firefox 中的高度渲染不同

当将块级元素的高度设置为 auto 或 0~100% 且未显式指定父元素的 height 属性时， Chrome 中计算的高度可能与 Firefox 不同，特别是当元素有下边距时。

为什么区别？

W3C CSS2.1 规范规定，如果未明确指定包含块的高度，则 height: 1% 应计算为 auto。然而，Chrome 遵循更传统的解释，需要在父元素上设置高度属性，以便百分比高度适用于子元素。

另一方面，Firefox 和 IE 最近扩大了它们的解释以接受 flex高度作为百分比高度的参考。这种与传统解释的偏差导致了浏览器中渲染的差异。

替代解决方案

要在 Chrome 和 Firefox 中实现所需的行为，请考虑以下替代方案：

• 将 display: flex 应用于父级，这会设置align-items:stretch 并强制子级展开到父级的完整位置height.
• 在父级上使用position:relative 和position:absolute；高度：100%；宽度：孩子身上的 100%。此方法覆盖了 Chrome 中的百分比高度问题。

以上是为什么 Chrome 和 Firefox 渲染块元素高度不同？的详细内容。更多信息请关注PHP中文网其他相关文章！