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上遇到问题，但你可以尝试的是加倍＆＃39;：＆＃39;在伪元素之前：

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

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

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

Answer 2

CSS中的普通类：

.myClass { 
    margin-top: 0px; 
} 

对Firefox使用此CSS hack：

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

Answer 3

我检查了你的代码，并尝试在firefox中运行它，但问题与你说的相同，然后添加

  

.wizard-steps li.active：在{border-left：24px solid＃555;显示：   块; }

它可以在我的浏览器上运行。你能检查一下吗？

Answer 4

为什么在使用之前和之后使用：

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

并且在大多数情况下停止使用位置相对女巫废墟响应或css设计。

尝试将元素放在一个div宽度的过程中：.box {width：100％;显示：块; float：left;}

并使用float：left定位.box div中的其他元素;显示块;边距或填充左边和宽度（％），看看会发生什么;）