Html Firefox中的间距问题

与Chrome相比，Firefox中的div之间一直存在一些奇怪的间距问题。Firefox计算的元素高度大于其内部内容的高度

我已经在使用CSS重置

尝试更改

框模型

，

浮动

，

显示

，

边距

，

填充

，但没有任何结果

在Firefox中可以看到：

镀铬：

---

您需要为卡号行下的该div设置宽度。将其设置为290像素

<div class="pure-u-sm-1 pure-u-8-24 reason"></div>

宽度：在这里使用的结束div上继承。

您选择的网格系统对WebKit使用flexbox，对Firefox使用内联块，块之间没有完全删除空白字符。当前版本的Firefox也支持flexbox（不固定），因此您可以添加

display:flex;
flex-flow:row wrap;

到

.pure-g

，在Firefox中获得与Webkit相同的显示效果

---

此外，该网格系统依赖于魔法常数，如

-0.43em

（假定为空白字符的宽度，但不等于任何常用字体中的宽度）。最好不要依赖这些东西，所以试试其他没有这种“黑魔法”的网格系统。

有可能在网上的某个地方看到代码吗？或者在一个文件中复制你的css和html？请给出一些代码，最好是在一个JSFIDLE.NET文件中。设置固定宽度的可能重复会破坏响应性。还有其他方法吗？您也可以设置最大宽度。这个示例可能会有所帮助：它只对旧浏览器使用“magic”，而对任何支持它的浏览器使用

flexbox

。