按鈕看起來不同取決於圖形卡

我有一個按鈕，它在Firefox中呈現奇怪（我正在測試各種版本，但我已經看到它的所有）。有關更多詳細信息，我使用Normalize.css。按鈕看起來不同取決於圖形卡

經過多次測試，問題PC與具有正確行爲的PC之間的唯一區別是顯卡。

此外，問題因您所看到的頁面而異（該按鈕位於各種頁面中）。

在這裏，您可以在不同的PC上看到一些截圖： enter image description here

我已經做了測試用例中的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; 
}

是什麼導致了這個問題？這可以證明是視頻卡？
有沒有什麼辦法可以解決這個問題，而無需爲其他用戶設計螺絲？

編輯：我試着從尼科澳建議，以及硬件加速似乎並不在渲染任何影響。

EDIT2：使用css3不是一個選項，因爲網絡中有很多按鈕。如果這是唯一的解決方案，客戶會寧願將其保留爲「不良」。

來源

2014-02-21 Arkana

有趣。我無法真正解釋它。但是我會研究硬件加速的方向。我已經禁用了它在我的FF和按鈕看起來仍然沒問題。但也許這是你可以測試的一件事。另一方面，另一方面是 –

。如果你現在想擺脫這個問題，你可以用CSS3重建按鈕。或者至少嘗試用CSS添加邊框（這似乎是最大的問題），而不是在兩個圖像中。 –

用css3重建按鈕是最好的方法。但客戶希望在IE7中提供支持，並希望保存所有的圓角¬¬我試圖教育他，但沒有成功...... – Arkana

也許這是「硬件加速（GPU渲染）」的錯誤。您可以禁用選項並再次測試，但您最好使用CSS3。

但我的客戶希望IE7：在CSS聲明你的正常的按鈕在IE7的作品比作一個媒體查詢與您的CSS3按鈕的任何決議的作品，這樣的按鈕仍然在IE7不錯，工作很好的Firefox瀏覽器。

來源

2014-02-21 11:43:34

對不起，硬件加速沒有任何區別。我知道這個問題隨着css3消失，但現在不是一種選擇。 – Arkana

爲什麼不選擇一個選項？您可以使用CSS3來解決您的Firefox問題，並保持IE完好無損。另外，我很確定，如果你玩CSS像調整按鈕或應用一些規則，即使使用CSS2也可以解決這個問題。 –

不是一個選項，因爲網站上有很多按鈕。客戶不想花費那麼多開發時間，你知道...... – Arkana

按鈕看起來不同取決於圖形卡

回答

相關問題