Question

我最近在使用响应式css网格，所以我尝试为自己的新项目制作一个。我决定保持相当简单，所以我使用display:inline-block属性作为我的单元格。

这可能需要margin:-0.25em“hack”或删除inline-block个元素之间的空格，以反击最后一个元素跳转到新行。

我决定删除列之间的空白区域。即使在IE8中也能很好地运行，但由于某些原因，最新的Firefox就好像它们之间存在空白一样。

我现在只能想到的解释是Firefox会在呈现HTML代码之前重新格式化HTML代码，并且在此过程中会在每个new line结束标记之后添加</div>。

这是我的JS Fiddle

提前致谢！

[ANSWER] 我忘记为box-sizing添加firefox前缀，并且填充列之间的间距会因此而产生过多的内容。

通过向-moz-box-sizing: border-box;元素添加col来解决此问题。

Answer 1

使用display：inline-block

尝试 vertical-align：top

Answer 2

在摆弄代码之后，问题是10px填充。如果删除该行，则Firefox显示与chrome相同（我没有在IE中测试）。

真的，这可能是对firefox的疏忽。我不会太担心它，因为你的页面仍然可读，虽然有点难看。

我的建议是，你是否倾向于修复它是通过调整它们的相对位置来“手动”填充单元格。

Answer 3

使用内联块作为其显示样式的任何css-grid（例如Pure CSS）都需要一个元素（通常是div）作为你注入你的网格元素的直接子元素填充即可。请参阅下面的伪代码示例（请注意这是虚构的网格语法）：

...
<style>
    .inner-wrap {
        padding: 1em;
    }
</style>
...
<div class="grid-one-third">
    <div class="inner-wrap">
    </div>
</div>

在上面的示例中，直接将填充应用于“grid-one-third”会破坏您的布局。将它应用于“内包装”虽然可以实现您想要的结果，而不需要像 box-sizing：border-box 这样的东西，在这种情况下我将其视为问题的黑客解决方案