在其他浏览器中不会出现的 Firefox 中奇怪的边距/填充

Question

我们一直在开发一个新网站，并且在 Firefox 6 中出现了一些神秘的填充/边距，而在任何其他浏览器（包括 IE）中都不会出现。

它应该是什么样子：

Firefox 显示的内容：

额外的边距/填充出现在 Blackboard + Portal 按钮的正上方。

玩 Firebug 与 float:left on ul.springboard li 有关。

谁能指出我正确的方向？

谢谢

Answer 1

我尝试删除 clearfix 类并将以下规则添加到 ul.springboard：

display: inline-block;
width: 100%;

这删除了 ​​Firefox 中的空格，但我不确定它将如何影响使用 .springboard 类的其他 ul 元素。

Answer 2

我认为您的问题是您实际上还没有为.clearfix 设置样式。下面的 CSS 添加应该会让你明白。

/* Micro-clearfix, via goo.gl/QjJD9 */
.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom:1; }