【发布时间】：2023-04-05 16:16:01
【问题描述】：
我有一个按钮，它在 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，因为网络上有很多按钮。如果这是唯一的解决方案，客户宁愿让它“坏”。
【问题讨论】：
-
有趣。我真的无法解释。但我会在硬件加速的方向进行调查。我已经在我的 FF 中禁用了它，并且按钮看起来还可以。但也许这是你可以测试的一件事。
-
另一方面。如果你现在想摆脱这个问题，你可以用 CSS3 重建按钮。或者至少尝试使用 CSS 而不是在两个图像中添加边框（这似乎是最大的问题）。
-
用 css3 重建按钮是最好的方法。但是客户希望在 IE7 中获得支持，并希望完全保留圆角 ¬¬ 我试图教育他，但没有成功......
-
当我想到一个 ;D 时，我会给出一个更有帮助的评论，但是 atm，我无法相信他想要 IE7。 WinXP 和 IE7 将在 46 天内死亡。
-
看来Intel显卡的电脑没有硬件加速或者不知道在哪里（笔记本是集成卡）。
标签： css firefox rendering video-card