파이어폭스 버튼 내부의 여백

가급적 일반 링크는 a태그를, 스크립트로 동작하는 기능은 button태그를 사용한다.

그러다보면 button 안에 img 태그를 사용하게 되는 일이 많은데 파이어폭스에서는 묘한 여백이 생겨있다.

분명 margin과 padding 모두 0으로 해뒀음에도..

그럴땐 파폭 전용 css를 추가해주면 된다고 한다.

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

http://taegon.kim/archives/3548

아예 리셋해놓는게 좋겠다.

button::-moz-focus-inner,
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
{padding:0; border:0;}

http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox