为什么 Chrome 和 Firefox 在使用百分比高度计算块级元素的高度方面存在差异？

Chrome 和 Firefox 中渲染高度的差异

问题

将块级元素的高度设置为“auto”或“0~100%” " 没有明确指定父级的高度会导致 Chrome 和 Firefox 中的高度计算不同。在“height: 1%”的情况下，Chrome 会将高度计算为下边距加上内容高度，而 Firefox 则不会。尽管 CSS 规范规定，当未显式设置父级高度时，“height: 1%”应计算为“auto”，但此行为有所不同。

原因

虽然 W3C 提供了以下标准对于浏览器，浏览器制造商可以自由地以不同的方式实施这些标准。在这种情况下，Chrome 和 Firefox 对“高度”属性的解释不同。

Chrome 遵循更传统的规范解释，要求在父元素上设置百分比高度才能在子元素上工作。 Firefox 和 IE 最近扩大了它们的解释范围，也接受弹性高度。

替代解决方案

要解决这种不一致问题，请考虑使用以下替代方案之一：

• 显示 Flex： 在父级上设置“display: flex”，它会自动设置“align-items:
• 绝对定位： 在父级上设置“position:relative”和“position:absolute;width; ：100%”对孩子来说。这允许在父级上不指定高度的情况下使用百分比高度。

以上是为什么 Chrome 和 Firefox 在使用百分比高度计算块级元素的高度方面存在差异？的详细内容。更多信息请关注PHP中文网其他相关文章！