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

Program / 글쓴이

이 코드 예제를 참조하십시오 : 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

간단하고 완벽합니다!

답변