Question

我已经包含了link to a video深入描述这一点，但基本上Firefox正在向元素添加左/右空白，使得感知填充与Chrome和IE不同。如果我修改Firebug中的值并更改回来，那么空格就会消失，并且就像我期望的那样工作。这是非常令人沮丧的，任何想法？

请查看the video以获取准确的说明。

由于

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

更新2：它似乎是：FF有问题的第一个字母伪元素。我认为这是一个实际的浏览器错误，但我不知道如何解决这个问题。

Answer 1

好的，我想出来了！

尝试在JSfiddle上重新创建此尝试后，我发现：第一个字母的伪元素导致了问题。然后我做了一些搜索，发现这是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报告与此问题联系起来。

Answer 2

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

在CSS文档的开头应用它。或者检查您的父CSS声明。继承可能存在问题。

希望这有帮助！

Firefox <a> element</a>上的空白奇怪错误

2 个答案: