Question

此codepen在Chrome上创建一个100 * 50像素的红色网格网格。这是预期的行为。

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  background-color: red;
  padding-bottom: 50%;
}

<div id="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Firefox 52完全忽略了padding-bottom: 50%;，我不知道为什么。

我找不到任何解决方法。有人可以帮助我吗？

Answer 1

来自规范：

6.4. Grid Item Margins and Paddings

作者应该完全避免在网格项目中使用填充或边距的百分比，因为它们会在不同的浏览器中获得不同的行为。

以下是完整部分：

由于相邻网格项独立包含在   包含由其网格区域形成的块，相邻的边缘   网格项不会崩溃。

可以解决网格项上的百分比边距和填充   之一：


他们自己的轴（左/右百分比分解宽度，顶部/底部分辨高度），或，

内联轴（左/右/上/下百分比全部解析宽度）


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

注意：这种差异很糟糕，但它准确地捕捉到了世界的当前状态（实现之间没有达成共识，也没有   CSSWG内部的共识）。 CSSWG是浏览器的意图   将集中于其中一个行为，此时规范将是   修改为要求。

作者应该完全避免在网格项目中使用填充或边距的百分比，因为它们会在不同的行为中获得不同的行为   浏览器。

自动边距扩大以吸收相应的额外空间   尺寸，因此可以用于对齐。

另一种CSS3技术Flexbox拥有same problem。

这里是我如何为嵌套在flex容器中的视频实现padding-bottom技巧（参见最后一个要点）：https://stackoverflow.com/a/39310591/3597276

Answer 2

我找到了一个解决方案：我必须在单元格中添加一个宽度为100％＆＃39;规则，它最终适用于Firefox 52！

＆＃13;

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  width: 100%;
}
.inner{
  background-color: red;
  padding-bottom: 50%;
}

＆＃13;

<div id="grid">
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
</div>

＆＃13;

它可能是一个临时解决方案，由于CSS网格是全新的，因此可能会发生变化。

Firefox中忽略网格项上的百分比填充/边距

2 个答案: