Firefox中的间距问题

Question

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

我已经在使用CSS重置。

尝试更改box-model，float，display，margin，padding并且不会产生任何结果。

在Firefox中看到：

在Chrome中看到：

Answer 1

您需要为此CARD NUMBER行下的div设置宽度。设置为290px。

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

Answer 2

结尾div上的

width:inherit在这里工作。

Answer 3

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

display:flex;
flex-flow:row wrap;

到.pure-g以获得Firefox中与Webkit中相同的显示。

此外，这个网格系统依赖于像-0.43em这样的魔术常量（应该是空格字符的宽度，但在任何流行的字体中都不等于它）。最好不要依赖这些东西，所以尝试其他没有这种“黑魔法”的网格系统。