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

【问题标题】：Percentage padding / margin on grid item ignored in FirefoxFirefox 中忽略的网格项目的百分比填充/边距
【发布时间】：2017-07-31 04:54:15
【问题描述】：

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

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

【问题讨论】：

您的填充在 Chrome 和 Firefox 中似乎相同。您能具体说明问题是什么吗？
您在 Firefox 上看到 100x50 像素的红色单元格网格吗？ Firefox 52 什么也没给我，我只有 8px 的网格间隙。根本没有红细胞。
Firefox 51.0.1（最新版本的 Firefox）向我显示红色单元格。你确定你有 Firefox 52？你有测试版吗？这可能是问题所在。
Firefox 52，虽然它不是测试版。这是一个错误吗？因为我测试过，firefox 不会忽略网格外的这个 padding-bottom。
奇怪，52 三天前出来了，但我的 51.0.1 报告是最新的。无论如何，可能很难判断是否应用了填充，因为无论您是否有填充，CodePen 都将完全坚固。填充包括背景颜色；您可能正在寻找 margin-bottom 。此外，百分比是相对于元素的内容区域。由于您没有明确提供此信息，因此您可能会得到奇怪的结果。也许 Firefox 52 试图“纠正这个”。

标签： css firefox css-grid

【解决方案1】：

来自规范：

6.4. Grid Item Margins and Paddings

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

这是完整的部分：

由于相邻的网格项目独立包含在包含由它们的网格区域形成的块，相邻的边缘网格项目不会折叠。

可以解决网格项目上的百分比边距和填充要么：

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

内联轴（左/右/上/下百分比都根据宽度解析）

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

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

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

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

Flexbox 是另一种 CSS3 技术，具有 same problem。

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

【讨论】：

这是否意味着不可能创建具有特定比例的单元格网格？
这意味着你现在应该忘记在网格项目上使用百分比填充或边距，如果你希望你的布局跨浏览器工作。
奇怪的是，根据问题的 cmets，它显然适用于 FF 51。
根据规范，主要问题不是它有效或无效。就是跨浏览器的实现不一致。
比这更复杂，我想要一个动态大小的特定比例，这是codepen.io/anon/pen/xqgrqj的样子。但是我知道在加载图像时保留图像区域的唯一方法是在其容器上使用填充底部技巧，并将图像放在其中的绝对位置。

【解决方案2】：

我找到了解决方案：我必须使用“宽度：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 网格是全新的，可能会发生变化。

【讨论】：