Firefox渲染元素不正确(硬件加速问题)

Question

我只使用CSS构建了这个向导.但是在新版本的Firefox中存在问题.在谷歌C​​hrome和IE 9+完美的工作.问题似乎是伪元素:after和:before

这是错误的图片:

这里有一张如何在Chrome中运行并且应该在Firefox中运行的图片:

摆弄代码:http://jsfiddle.net/2jZmr/1/

更新:我看到问题不仅在于Firefox的版本,在具有相同版本的Firefox(v28)的两台不同计算机上进行了测试,其中一台有效,另一台无法运行.我在我的机器上重新安装了Firefox,问题仍然存在.我也在Android 4.4.2的Firefox上测试过,它运行正常.

Update2:当我在安全模式下打开firefox时,不会发生错误.但只是禁用所有插件,加载项和主题不能纠正错误.

Update3:我找到了错误的原因.问题是Firefox硬件加速.

我按照以下步骤操作:

1. 在Firefox窗口的顶部,单击Firefox按钮,然后选择选项
2. 选择"高级"面板和"常规"选项卡.
3. 取消选中可用时使用硬件加速.
4. 在Firefox窗口的顶部,单击Firefox按钮,然后选择退出
5. 像往常一样启动Firefox.

但是有可能通过javascript更改css或执行一些代码以在启用了硬件加速的Firefox中运行吗？

如果没有,将使用的替代方案将使用图像而不是CSS3.

编辑:我的Firefox现在版本为32.0,问题仍然存在.

Answer 1

我的 FF 没有遇到问题，但您可以尝试在伪元素之前加倍 ':' ：

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

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

src： https: //developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements