为什么 Chrome 和 Firefox 在块级元素上渲染百分比高度不同？

Chrome 和 Firefox 中的高度渲染不同

问题：

将块级元素的高度设置为百分比时（例如，1%）没有明确设置其父级的高度，为什么 Chrome 和 Firefox 会计算高度不同的是，Chrome 会考虑子元素的下边距，而 Firefox 不会？

答案：

CSS 标准规定，如果未明确指定包含块的高度，则使用百分比height 计算为“auto”。

但是，不同的浏览器已经实现了此规定不同的是：

• Webkit 浏览器（Chrome、Safari） 坚持传统的解释，要求父级有一个设定的百分比高度才能对流入的子级起作用。
• Firefox 和 IE 扩大了他们的解释，接受弹性高度作为好吧。

这种与规范的偏差导致了渲染不一致，一些浏览器使用弹性高度，而其他浏览器则需要设置父级高度。

替代解决方案：

为了确保在所有浏览器中呈现一致的渲染，请考虑使用以下其中一种替代方案：

• 将父级的显示设置为“flex”以使用align-items自动启用子级的全高：stretch。
• 使用位置: 分别在父元素和子元素上使用绝对值和position:relative，子元素的高度为：100%；宽度：100%。即使没有指定父元素高度，这也允许百分比高度作用于子元素。

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