슬라이딩 도어 Firefox에서 버튼 구성 요소가 깨졌습니다.

Question

일반용으로 사용할 수있는 슬라이딩 도어 버튼을 시도하고 있습니다. Firefox를 제외한 모든 기능이 정상적으로 작동합니다. 버튼의 span 요소는 항상 FF에서 2px보다 낮습니다. 여기

예를

http://jsbin.com/orami3/4

Answer 1

이 시도 :

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

(콜론 (것을 마음 :)가 두 배가됩니다 예.)

여기를 해킹하는 방법 중 하나입니다

이 경우 여분의 패딩은 불분명 한 Firefox 버그로 인해 발생합니다.

(이 버그 나 자신을 발견 데 나는 구글 검색을 통해 솔루션 at this blog을 발견했습니다.)

Answer 2

이런 일이 발생하는 이유 글쎄, 나도 몰라,하지만 여기에 몇 가지 낯선이있다. 그것은 Safari에도 영향을 미치며 약간 다릅니다. 버튼 스팬에 음수 여백을 추가하면 Safari에서보다 Firefox에서 거리가 절반만큼 이동합니다. 따라서이 솔루션은 배경 이미지를 상쇄하는 것으로 보입니다.

/*grey button hacks non-IE*/ 
button.grey span{ 
    background-position: 0 -1px; 
} 
button.grey:hover span{ 
    background-position: 0 -36px;  
} 
button.grey:active span{ 
    background-position: 0 -71px;  
} 

/* IE workaround. The \9 makes non-IE ignore these styles*/ 
button.grey span{ 
    background-position: 0 0px\9; 
} 
button.grey:hover span{ 
    background-position: 0 -35px\9;  
} 
button.grey:active span{ 
    background-position: 0 -70px\9;  
} 

예 여기 : http://jsbin.com/orami3/9