为了账号安全,请及时绑定邮箱和手机立即绑定

为什么百分比填充/保证金不工作在Firefox和Edge中的Flex项上?

为什么百分比填充/保证金不工作在Firefox和Edge中的Flex项上?

白衣染霜花 2019-06-15 13:55:12
为什么百分比填充/保证金不工作在Firefox和Edge中的Flex项上?我想在挠曲箱里放一个方向盘。所以我用:.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
查看完整描述

2 回答

?
12345678_0001

TA贡献1802条经验 获得超5个赞

柔性箱规范已经更新。

4.2.挠曲项边距和衬垫

与块框上的项目一样,挠曲项上的百分比边距和垫片是根据其包含块的内联大小(例如左/右/上/下百分比)解析的,所有这些百分比都是根据其包含块的宽度在水平写入模式下解析的。


挠曲箱规格:

作者应该完全避免在Paddings或FlexItem上使用百分比,因为他们在不同的浏览器中会得到不同的行为。

这里还有一些:

4.2.挠曲项边距和衬垫

在FLEX项目上的百分比边距和垫片可以通过以下两种方法来解决:

  • 它们自己的轴(左/右百分比相对于宽度,顶部/底部百分比与高度对应),或,
  • 内联轴(左/右/上/下百分比都是相对宽度解析的)

用户代理必须选择这两种行为之一。

注意:这种差异很糟糕,但它准确地捕捉到了世界的现状(实现之间没有共识,CSSWG内部也没有共识)。CSSWG的意图是,浏览器将集中在其中一种行为上,届时规范将被修改。


查看完整回答
反对 回复 2019-06-15
  • 2 回答
  • 0 关注
  • 671 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信