Jin*_*inx 8 css grid firefox fluid-layout
我最近正在玩响应式css网格,所以我尝试为自己的新项目制作一个.我决定保持它相当简单,所以我使用display:inline-block属性为我的细胞.
这将要求margin:-0.25em"破解"或删除inline-block元素之间的空格以抵消最后一个元素跳过到新行.
我决定删除列之间的空白区域.即使在IE8中它也很出色,但由于某种原因,最新的Firefox就好像它们之间有空白区域.
我现在只能想到的解释是Firefox在渲染之前重新格式化HTML代码,并且在new line每个</div>结束标记之后添加该代码.
这是我的JS小提琴
提前致谢!
[答案]
我已经忘了为它添加firefox前缀box-sizing,并且填充作为列间距的填充因此而产生了多余的内容.
它通过添加:-moz-box-sizing: border-box;到col元素来修复.
摆弄代码后，问题是 10px 填充。如果删除该行，Firefox 会显示与 Chrome 相同的内容（我没有在 IE 中进行测试）。
事实上，这可能是 Firefox 的一个疏忽。我不会太担心它，因为你的页面仍然可读，尽管有点难看。
如果您非常愿意修复它，我的建议是通过调整单元格的相对位置来“手动”填充单元格。