在Firefox中忽略栅格项目的百分比填充/边距

本文介绍了在Firefox中忽略栅格项目的百分比填充/边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 这个 codepen 会在Chrome上创建一个100 * 50像素的红色单元格。这是预期的行为。 #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中忽略栅格项目的百分比填充/边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！