가급적 일반 링크는 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로 배경색을 넣고 해도 없어지지 않더라.

appearance:none; 처리하면 없어진다. 다만 -webkit- 을 붙여서 -webkit-appearance:none; 으로 해줘야 한다.

그리고 select에도 같은 현상이 있다.


input, textarea, button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}

input, textarea, button, select {-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;}


select의 경우 위의 방식으로 배경을 없애버리면 펼침버튼(▽)도 같이 사라지기 때문에 테두리만 리셋했다.

블로그 이미지

먼지손

,