在 Firefox 中忽略网格项的百分比填充/边距 [英] Percentage padding / margin on grid item ignored in Firefox

问题描述

这个

#grid{显示:网格；网格间距:8px；网格模板列:100px 100px；}.细胞{背景颜色:红色；填充底部:50%；}

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

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

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

解决方案

我找到了解决方案:我不得不使用宽度:100%"规则向单元格添加一个包装器，它终于在 Firefox 52 上运行了！

#grid{显示:网格；网格间距:8px；网格模板列:100px 100px；}.细胞{宽度:100%；}.内{背景颜色:红色；填充底部:50%；}

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

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

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

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

This codepen creates a grid of red cells 100*50 px on Chrome. This is the expected behavior.

#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 completely ignores the padding-bottom: 50%; and I don't know why.

I can't find any workaround. Can someone please help me?

解决方案

I found a solution: I had to add a wrapper to the cell with a 'width: 100%' rule and it finally works on 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>

It's probably a temporary solution which is subject to change due to the CSS grid being brand new.

这篇关于在 Firefox 中忽略网格项的百分比填充/边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！