按钮看起来不同取决于图形卡

Question

我有一个按钮，它在Firefox中呈现出奇怪的效果（我正在测试各种版本，但我已经在所有版本中看到了它）。有关更多详细信息，请使用Normalize.css。

经过多次测试后，带问题的PC和具有正确行为的PC之间的唯一区别是显卡。

此外，问题因您看到的页面而异（按钮位于各个页面中）。

在这里，您可以看到不同PC中的一些屏幕截图：

我在jsFiddle 中创建了一个测试用例：http://jsfiddle.net/5R2NL/1/

这是HTML：

<div class="botonVerdeenlace">
    <a title="Title" href="#">I feel like a button</a>
</div>

相关的CSS：

body{font-size:68.75%}

.botonVerdeenlace {
    background: url("http://i.imgur.com/lk4ZJxQ.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    display: inline-block;
    font-weight: normal;
    margin: 0;
    padding: 8px 2px 7px 29px;
}


.botonVerdeenlace a, .botonVerdeenlace a:visited {
    background: url("http://i.imgur.com/2IgIR37.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF !important;
    font-family: Arial,sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;
    padding: 8px 1em 7px 7px;
    text-align: center;
    text-decoration: none;
}

• 导致该问题的原因是什么？它绝对是视频卡吗？
• 有没有办法解决这个问题而不必为其他设计搞砸 用户吗

编辑：我尝试了Nico O的建议，硬件加速似乎对渲染没有任何影响。

EDIT2：使用css3不是一个选项，因为网络上有很多按钮。如果这是唯一的解决方案，客户会更喜欢让它“糟糕”。

Answer 1

可能是“硬件加速（GPU渲染）”故障。您可以在选项上禁用此选项并再次测试，但使用CSS3可以更好地提供服务。

但是我的客户想要IE7 ：在CSS上声明你在IE7上运行的普通按钮，而不是使用CSS3按钮制作适用于任何分辨率的媒体查询，这样按钮在IE7上仍然很好用在Firefox上工作得很好。