我最近在使用响应式CSS网格,因此我尝试自己开发新元素。我决定使它保持简单,因此我在单元格中使用了display:inline-block属性。
这可能需要margin:-0.25em“hack”或删除inline-block元素之间的空格以应对最后一个元素跳到新行的问题。
我决定删除列之间的空白。即使在IE8中,它也能出色地工作,但是由于某些原因,最新的Firefox似乎在两者之间留有空白。
我现在唯一能想到的解释是,Firefox在呈现HTML代码之前先对其重新格式化,并在此过程中在每个new line关闭标记之后添加</div>
这是我的JS Fiddle
提前致谢!
[ANSWER]
我忘记为box-sizing放置firefox前缀,因此,用作列之间间隔的填充使内容过多。
通过在-moz-box-sizing: border-box;元素中添加col可以解决此问题。

最佳答案

摆弄代码后,问题是10px填充。如果删除该行,则Firefox会显示与chrome相同(我没有在IE中进行测试)。

确实,这可能是对Firefox方面的疏忽。我不会对此太担心,因为您的页面仍然可读,尽管有点难看。

我的建议是,如果您愿意修复它,可以通过调整它们的相对位置“手动”填充这些细胞。

10-05 21:03
查看更多