Firefox에서 추가 버튼 간격 / 패딩 제거

Firefox에서 추가 버튼 간격 / 패딩 제거

---

이 코드 예제를 참조하십시오 : http://jsfiddle.net/Z2BMK/

Chrome / IE8은 다음과 같습니다.

Firefox는 다음과 같습니다.

내 CSS는

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

두 브라우저에서 버튼을 동일하게 만들기 위해 코드 샘플을 어떻게 변경할 수 있습니까? JavaScript 기반 하이퍼 링크는 키보드의 스페이스 바와 함께 작동하지 않고 작업 href을 처리하는 깔끔한 방법이 아닌 URL이 있어야하므로 사용하고 싶지 않습니다 .

내 솔루션, Firefox 13 이후

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

---

이거 추가 해봐:

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

http://jsfiddle.net/thirtydot/Z2BMK/1/

border위 의 규칙을 포함하는 것은 버튼이 두 브라우저에서 동일하게 보이도록하는 데 필요하지만, 버튼이 activeFirefox에 있을 때 점선 윤곽선을 제거합니다 . 많은 개발자가이 점선 윤곽선을 제거하고 선택적으로 시각적으로 더 친숙한 것으로 대체합니다.

---

입력 요소에서도 수정하려면

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

간단하고 완벽합니다!

참고 URL : https://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox