我最近在使用响应式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方面的疏忽。我不会对此太担心,因为您的页面仍然可读,尽管有点难看。
我的建议是,如果您愿意修复它,可以通过调整它们的相对位置“手动”填充这些细胞。