버튼이 그래픽 카드에 따라 달라집니다.

Question

버튼이 있으며 Firefox에서 이상하게 렌더링됩니다 (다양한 버전을 테스트 중이지만 모든 기능이 지원됩니다). 자세한 내용은 Normalize.css를 사용합니다.

몇 가지 테스트를 마친 후에 문제가있는 PC와 올바른 동작을하는 PC의 유일한 차이점은 그래픽 카드입니다.

또한 문제는보고있는 페이지 (버튼이 여러 페이지에 있음)에 따라 다릅니다. 여기

당신은 다른 PC에있는 몇 가지 스크린 샷을 볼 수

내가 jsFiddle에 테스트 케이스를 만든 :

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

그리고 관련 : 여기

http://jsfiddle.net/5R2NL/1/는 HTML의 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; 
} 

• 해당 문제의 원인은 무엇입니까? 그게 비디오 카드인가?
• 다른 사용자의 디자인을 나사로 고정하지 않고이 문제를 해결할 수있는 방법이 있습니까?

편집 : 나는 니코 O의 제안을 시도하고 하드웨어 가속 렌더링에 어떤 영향을 미칠 것으로 보인다되지 않습니다.

EDIT2 : 웹에 많은 버튼이 있으므로 css3은 사용할 수 없습니다. 이것이 유일한 해결책이라면 클라이언트는 그것을 "나쁘게"남겨두기를 원할 것입니다.

Answer 1

"하드웨어 가속 (GPU 렌더링)"오류 일 수 있습니다. 옵션에서이 기능을 비활성화하고 다시 테스트 할 수는 있지만 CSS3를 사용하면 더 효과적입니다.

하지만 내 클라이언트는 IE7 원 : CSS에 CSS3 버튼으로 어떤 해결을 위해 작동하는 미디어 쿼리, IE7에 좋은 버튼 아직도 그 길을보다 IE7에서 작동하고 꽤 잘 작동 일반 버튼을 선언 파이어 폭스.