button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법

옆과 같이 이전, 다음 보기를 마크업 할 때, 기존에는 그냥 이미지에 앵커를 줘서 작업을 하였는데, CSS를 제거한 html의 모습에서 이전과 다음 보기가 button요소로 보이는 것이 맞는 듯 하여 이번에는 button요소를 사용해서 작업하려고 하였다.

그런데, 이상하게도 IE8에서는 자꾸 버튼이 움직움직~ 거리고,  FF에서는 클릭하는 부분이 너비가 1px밖에 되지 않는 것이였다. 게다가 백그라운드로 깔은 이미지도 제대로 보여지지 않고...구글을 아무리 뒤져도 나오지 않더니...거의 포기할 무렵에 네이버 널리의 글이 하나 보였다.

NULI Blog - button의 브라우저별 랜더링 비교, 사용방법, 문제점 ...

html.nhndesign.com

더 큰 문제는 FF와 Chrome에서는 button이 기본적으로 여백을 가지고 있다는 것입니다 . (아래 표 참고) FF과 Chrome에서도 그 여백에 차이가 있어 CSS hack으로도 ...

이 글을 보니, 내가 button요소에는 margin과 padding을 0으로 주지 않은 것을 알게 되었고, 간단하게 margin:0, padding:0을 넣어서 해결할 수 있게 되었다. 만세!
앞으로 열심히 이런 문제 해결에 대해 적어야 하겠다. 지금 당장은 아무 도움이 되지 않겠지만 누군가도 나처럼 검색하다가 같은 버그를 만났을 때 도움이 되지 않을까?

덧. 고마워요 널리~ 그리고 IE8에서 움찔~하는건 고쳐야겠지? 아 고치기 싫은데;