当前位置: 首页 > 面试题库 >

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

佟和平
2023-03-14
问题内容

我想在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规范已更新。

4.2。 Flex项目边距和填充

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

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

根据 flexbox规范:

作者应避免在弹性项目的填充或边距中完全使用百分比,因为它们在不同的浏览器中会出现不同的行为。

还有更多:

4.2。 Flex项目边距和填充

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

  • 他们自己的轴(左/右百分比针对宽度,顶部/底部百分比针对高度),或者,
  • 内联轴(左/右/上/下百分比均针对宽度进行解析)

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

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



 类似资料:
  • 问题内容: 如果您查看CSS盒模型规范,将会观察到以下内容: [margin]百分比是相对于所生成的盒子的包含块的 宽度 来计算的。 请注意,“ margin-top”和“ margin- bottom”也是如此。 如果包含块的宽度取决于此元素,则结果布局在CSS 2.1中未定义。 (强调我的) 确实是这样。但是 为什么 呢?到底什么会迫使任何人以这种方式设计它?很容易想到您想要的场景,例如,某件

  • 问题内容: 我有两个div,高度为90%,但显示方式有所不同。 我试图在它们周围放一个外部div,但这没有帮助。另外,在Firefox,Chrome,Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗? 下面是我的代码: 问题答案: 使用(视口高度)代替百分比。它将获取浏览器的高度并相应地调整其大小,例如 试试这个代码 与CSS

  • 问题内容: 我有两个div,高度为90%,但显示方式有所不同。 我试图在它们周围放一个外部div,但这没有帮助。此外,在Firefox,Chrome,Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗? 下面是我的代码: 问题答案: 使用(视口高度)代替百分比。它将获取浏览器的高度并相应地调整其大小,例如 试试这个代码 与CSS

  • 问题内容: 为什么百分比值不起作用,但是百分比值却起作用呢? 端部的宽度为视口的80%,但端部的高度为0。 问题答案: 块元素的高度默认为块内容的高度。因此,给定这样的东西: 将生长到足以容纳段落的高度,并且将生长到足以容纳段落的高度。 当您将高度或宽度指定为百分比时,这是相对于元素父级的百分比。对于宽度,除非另有说明,否则所有块元素的宽度一直与其父元素一样,一直到;因此,块元素的宽度与它的内容无

  • 问题内容: 我正在尝试向元素内的display:flex元素添加填充。如果将填充定义为百分比,则在Firefox中不会显示填充,尽管在中定义时会显示px。两种情况在Chrome中都可以正常工作。 问题答案: 网格/弹性百分比 该小组试图研究如何定义垂直百分比边距和填充。注意:传统上,CSS的顶部和底部页边距是针对包含块的宽度而不是其高度进行解析的,这具有一些有用的效果,但通常令人惊讶。现有的布局模

  • 问题内容: 我一直在绞尽脑汁使用以下命令在CSS中创建垂直对齐方式 尽管这似乎适用于这种情况,但令我感到惊讶的是,当我增加或减小基本div的宽度时,垂直对齐方式会对齐。我期望当我设置padding- top属性时,会将填充值作为父容器高度的百分比(在我们的示例中为基数),但是上述50%的值是按宽度。:( 有没有一种方法可以将填充和/或边距设置为高度的百分比,而无需使用JavaScript? 问题答