2

这个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%;，我不知道为什么。

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

4

2 回答 2

4

从规范：

6.4. 网格项目边距和填充

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

这是完整的部分：

由于相邻的网格项独立包含在由其网格区域形成的包含块中，因此相邻网格项的边距不会塌陷。

网格项目的百分比边距和填充可以通过以下任一方式解决：

  • 他们自己的轴（左/右百分比根据宽度解析，顶部/底部根据高度解析），或者，
  • 内联轴（左/右/上/下百分比都根据宽度解析）

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

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

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

自动边距扩展以吸收相应维度中的额外空间，因此可用于对齐。

另一种 CSS3 技术 Flexbox 也有同样的问题。

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

于 2017-03-10T01:16:46.107 回答
0

我找到了一个解决方案：我必须使用“宽度：100%”规则向单元格添加一个包装器，它终于可以在 Firefox 52 上运行！

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  width: 100%;
}
.inner{
  background-color: red;
  padding-bottom: 50%;
}
<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>

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

于 2017-03-10T23:16:16.420 回答