为什么百分比填充/边距在Firefox和Edge中的弹性项目上不起​​作用？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想在flexbox中有一个Square 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。

回答：

flexbox规范已更新。

弹性项目（如方块框上的项目）的边距和填充百分比将根据其包含的块的内联大小进行解析，例如，在水平书写模式下，左/右/上/下百分比均根据其包含的块的宽度进行解析。

根据 flexbox规范：

还有更多：

可以根据以下任一条件解决弹性项目上的边距和填充百分比：

  • 他们自己的轴（左/右百分比针对宽度，顶部/底部百分比针对高度），或者，

  • 内联轴（左/右/上/下百分比均针对宽度进行解析）

注意：这种差异很糟，但是可以准确地捕获当前的状态（实现之间没有共识，CSSWG内部也没有共识）。CSSWG的意图是浏览器将集中于其中一种行为，届时将对规范进行修订。

以上是 为什么百分比填充/边距在Firefox和Edge中的弹性项目上不起​​作用？ 的全部内容， 来源链接： utcz.com/qa/408090.html

回到顶部