Firefox 中的间距问题答案

【问题标题】：Spacing issues in FirefoxFirefox 中的间距问题
【发布时间】：2014-10-25 06:24:27
【问题描述】：

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

我已经在使用 CSS 重置。

尝试更改 box-model、float、display、margin、padding 并没有产生任何结果。

在 Firefox 中可见：

在 Chrome 中看到：

【问题讨论】：

【解决方案1】：

您需要为 CARD NUMBER 行下的这个 div 设置宽度。将其设置为 290 像素。

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

【讨论】：

【解决方案2】：

width:inherit 在最后 div 在这里工作。

【讨论】：

【解决方案3】：

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

display:flex;
flex-flow:row wrap;

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

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

【讨论】：