火狐浏览器渲染元素错误（硬件加速问题）

Question

我只使用CSS编写了此向导。但是在Firefox的新版本中出现了问题。在Google Chrome和IE 9+中可以完美工作。问题似乎出现在伪元素:after和:before上。

下面是错误的图片：

这是Chrome中它的工作方式，也应该在Firefox中工作：

代码演示：http://jsfiddle.net/2jZmr/1/

更新: 我发现问题不仅出现在Firefox版本上，在两台有相同Firefox版本（v28）的不同电脑上进行测试，一台可以工作而另一台则不能。我已经重新安装了我的机器上的Firefox，问题仍然存在。我还在Android 4.4.2中的Firefox上进行了测试，结果正常。

更新2: 当我以安全模式打开Firefox时问题就不存在了。但仅仅禁用所有插件、附加组件和主题并不能纠正错误。

更新3: 我找到了错误的原因。问题出现在Firefox硬件加速上。

我按照以下步骤操作：

1. 在Firefox窗口顶部，单击Firefox按钮，然后选择选项
2. 选择高级选项卡和常规选项卡。
3. 取消勾选“可用时使用硬件加速”。
4. 在Firefox窗口顶部，单击Firefox按钮，然后选择退出
5. 以正常方式启动Firefox。

但是，是否可以更改CSS或通过JavaScript执行一些代码，在开启硬件加速的情况下在Firefox中运行？

如果不能，则将使用图片代替CSS3。

编辑：我的Firefox现在是32.0版本，问题仍然存在。

- Leonardo Delfino

---

它在FF 27.0.1上运行良好。 - emerson.marini

我已经检查了您提供的jsFiddle链接，这里看起来完美无缺。 - emerson.marini

Firefox关于：编译信息：Mozilla/5.0（Windows NT 6.1; WOW64; rv:28.0）Gecko/20100101 Firefox/28.0 - Leonardo Delfino

感谢更新。顺便说一下，它在32位Linux和Windows上使用/不使用硬件加速都很好。（FF v28）我稍后可以在Win-64bit 7上进行测试。 - user13500

我有一台与你相同配置的机器，@LeonardoDelfino - 这里没有显示错误。它是64位Win / 32位Fx。这台机器上还存在其他图像渲染问题，但你的jsFiddle看起来很好。 - Volker E.

Answer 1

我已经检查了你的代码并尝试在Firefox中运行它，但问题与你所说的一样。然后添加以下内容：

.wizard-steps li.active:after { border-left: 24px solid #555; display: block; }

这在我的浏览器上有效。请你检查一下？

- Prajan Karmacharya

---

我尝试过，但效果不佳。在您的浏览器中，渲染是否与我发布的图片完全相同？ - Leonardo Delfino

它在Firefox 28.0和Chrome版本33.0.1750.154 m上完美运行。您能否将您的URL发送给我，以便我可以检查一下。 - Prajan Karmacharya

Answer 2

我在我的FF浏览器上没有遇到这个问题，但你可以尝试在伪元素前加上两个冒号“::”：

有时您会看到双冒号(::)而不是一个(:)，这是CSS3的一部分，旨在区分伪类和伪元素。大多数浏览器都支持这两个值。

注意： ::selection始终以双冒号(::)开头。选择器中只能使用一个伪元素，它必须出现在语句的简单选择器之后。

来源: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

- Heaven42

Answer 3

普通的CSS类：

.myClass { 
    margin-top: 0px; 
} 

使用这个针对Firefox的CSS hack：

@-moz-document url-prefix() { 
    .myClass { 
         margin-top: -9px; 
    }  
}

- Kashif Raza

Answer 4

为什么要使用 before 和 after，而不是直接使用冒号：

display: block;
margin: 0;
padding: 0;
float: left;

停止使用相对定位，因为在大多数情况下会破坏响应式或 CSS 设计。

尝试将元素放置在单个 div 中，宽度为百分比大小：.box { width: 100%; display: block; float: left;}

并使用 float: left; display block; margin 或 padding left 和 width in % 在 .box div 中定位其他元素，看看会发生什么 ;)

- Bogdan Moisin

---

你真的读了问题并看到了代码吗？伪选择器的使用：after和:before是为了将项目添加到边缘。如果我删除边缘效果，我就会失败。我的问题不在于位置，而在于渲染。 - Leonardo Delfino