gpt4 book ai didi

html - 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的 flex 元素?

转载 作者:行者123 更新时间:2023-11-28 19:30:36 25 4
gpt4 key购买 nike

我想在 flexbox 中放置一个正方形的 div。所以我使用:

.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>

这在 Chrome 中运行良好。但在 Firefox 中,父级只占一行。

我如何在 Firefox 中解决这个问题?我使用的是 44 版。

您还可以在 https://jsbin.com/lakoxi/edit?html,css 查看代码

最佳答案

2018 年更新

flexbox 规范已更新。

4.2. Flex Item Margins and Paddings

Percentage margins and paddings on flex items, like those on blockboxes, are resolved against the inline size of their containing block,e.g. left/right/top/bottom percentages all resolve against theircontaining block’s width in horizontal writing modes.


原答案 - 适用于 2018 年之前发布的 FF 和 Edge 版本

来自 flexbox specification :

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

还有一些:

4.2. Flex Item Margins and Paddings

Percentage margins and paddings on flex items can be resolved against either:

  • their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
  • the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.

关于html - 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的 flex 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55123634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com