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

问题描述

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

< img src =https://i.stack.imgur.com/2ayCQ.pngalt =在这里输入图片描述>

  #grid {display：grid; grid-gap：8px; grid-template-columns：100px 100px;}。cell {background-color：red; padding-bottom：50％;}  

< div id = 网格 > < 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％; ，我不知道为什么。

我无法找到任何解决方法。有人可以帮我吗？
解决方案我找到了一个解决方案：
我不得不添加一个包装到单元格一个'宽度：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 = 网格 > < 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网格是全新的，可能会发生变化。


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屋！