본문 바로가기
생활일기/tip tech

input 태그에 이미지 사용팁

by 신일석 2007. 10. 17.
input 태그를 버튼으로 사용하다 보면 익스플로러에서 이미지의 아래 1행이 보이지 않는 경우가 있다.
아래 이미지는 IE6, IE7, Firefox2에서의 예로 FireFox는 이미지가 제대로 보인다.

/ek080000000043.jpg" width="500" height="161" />
/gk080000000049.jpg" width="500" height="175" />
/ek080000000042.jpg" width="500" height="134" />

이때, 이미지태그에 'margin-buttom:1px'를 주는 방법도 화면상에 사라지는 한줄을 보이게 할 수 있지만 전체적으로 높이가 1px 길어지는 결과를 가져온다. 이경우 배경이미지가 있다면 근본적인 해결책이 될 수 없고 코딩으로 배경이미지의 위치를 1행 아래로 조정해야 하므로 코딩이 점정 복잡해 진다.

IE의 버그로 보여지는데 input에 들어가는 이미지의 높이가 홀수 이면 1행이 보이지 않는 현상이 나타난다.

input에 이미지 버튼을 사용할때는 이미지의 높이를 짝수로 하는 것이 코드를 단순화하는데 좋다.