<a> 元素上的 Firefox 空白奇怪错误答案

【问题标题】：Firefox whitespace oddity bug on <a> element<a> 元素上的 Firefox 空白奇怪错误
【发布时间】：2015-04-10 02:16:29
【问题描述】：

我已经包含了一个 link to a video 对此进行了深入的描述，但基本上 Firefox 正在向元素添加左/右空格，从而使感知到的填充不同于 Chrome 和 IE。如果我修改 Firebug 中的值并改回来，那么空白就消失了，并且一开始就按照我的预期工作。这很令人沮丧，有什么想法吗？

请关注the video 了解详细说明。

谢谢

更新 1：这是一个可以检查代码的测试服务器，它可能与视频略有不同，但问题仍然相同。 test.audrey-oxenhorn.gotpantheon.com

更新 2：它似乎是 :first-letter FF 存在问题的伪元素。我认为这是一个实际的浏览器错误，但现在不确定如何解决。

【问题讨论】：

Google Meyer 重置或 normalize.css 您正在经历浏览器默认 CSS 设置，看起来似乎有些混乱。

标签： css firefox firebug

【解决方案1】：

好的，我想通了！

在尝试在 JSfiddle 上重新创建它后，我发现 :first-letter 伪元素导致了问题。然后我做了一些搜索，发现这是一个known browser bug in Firefox，从2007年开始开放。有一个类似的问题here。由于我能够通过 Firebug 触发重排/重绘来纠正该问题，因此我怀疑该问题与前面提到的问题相同，因此我使用以下代码触发了该块元素上的重排：

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }

.sf-menu a {
  -moz-animation: bugfix 0.001s;
}

问题已解决，我将 bugzilla 报告与此问题相关联。

【讨论】：

【解决方案2】：

您可能需要应用 CSS 主重置。你可以在这里找到：http://meyerweb.com/eric/tools/css/reset/

在 CSS 文档的开头应用这个。或者检查你的父 CSS 声明。继承可能有问题。

希望这会有所帮助！

【讨论】：

另外，如果这确实解决了问题，您将不需要整个重置。可能只是对a 的重置，所以a { padding: 0; margin: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
@Andy：确实是安迪，谢谢！但是完全重置滚动总是安全的，因此您也不会在其他元素上遇到同样的问题。
我添加了重置，但没有任何影响。值得一提的是，作为 Drupal 的 dgo.to/omega 主题的一部分，在级联的早期已经应用了一个重置。
@ElijahLynn：那你能给我们一个问题的链接吗？
这是一个测试服务器，您可以在上面检查代码（我认为它是或基于 960.gs reset.css），它可能与视频略有不同，但问题仍然相同. test.audrey-oxenhorn.gotpantheon.com