除非在容器上声明了明确的高度，否则Firefox会忽略Flex项目（Flexbox的子项）上的垂直边距 [英] Firefox ignores vertical margins on flex items (children of a flexbox) unless explicit height is declared on container

问题描述

我有一个使用基于百分比的利润率的flexbox创建的基于响应百分比的网格。它在Chrome和Safari中表现良好。但是，Firefox会折叠边距，除非在元素上设置了明确的高度。任何人都知道解决方法？

解决方案

这已被报告为 Firefox / Gecko中的错误，但它实际上是一个

在块的子元素（ display：block ）元素，百分比保证金&填充将根据块的宽度进行解析。这可能是您期望的行为，而这正是Blink 不正确为flex容器的子项所做的，正如上面的错误页面中所描述的。

但是，在flex容器中，百分比margin&填充应该根据相应的维度来解决（所以，例如margin-top / margin-底部将根据容器的高度来解决）。

此外，如果容器没有确定的高度（例如，如果它具有 height： auto ），那么百分比无法解析，所以他们解析为0。

I have a responsive percentage based grid created with flexbox using percentage based margins. It plays fine in Chrome and Safari. However Firefox collapses the margins unless an explicit height is set on the elements. Anyone know a workaround?

解决方案

This has been reported before as a bug in Firefox/Gecko, but it's actually a bug in Chrome/Blink.

On a child of a block (display:block) element, percent margin & padding will resolve against the block's width. That's likely the behavior you're expecting, and that's what Blink incorrectly does for children of flex containers, as described in the bug page above.

But, in a flex container, percent margin & padding are supposed to resolve against the respective dimension (so, e.g. margin-top/margin-bottom will be resolved against the container's height).

Moreover, if the container doesn't have a definite height (e.g if it has height:auto) then percentages can't be resolved, so they resolve to 0.

这篇关于除非在容器上声明了明确的高度，否则Firefox会忽略Flex项目（Flexbox的子项）上的垂直边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！