가급적 일반 링크는 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


블로그 이미지

먼지손

,

저런 어이없는 현상이 발생하는 이유까진 모르겠고..

css에서 overflow:visible; 해주시면 해결이 된다..;

여차하면 기본(tags reset해주는 css쪽)에

button, input[type=button], input[type=submit] {overflow:visible;}

이렇게 추가해주면 좋지 않을까 싶기도..

아니면 ie7만 적용되시라는 핵이 언더바였던가 스타였던가;;

난 그냥 6,7 같이 쓰는 #overflow:visible; 로 처리.. (에혀 익스 진짜...)

블로그 이미지

먼지손

,