input 태그에 이미지 사용팁

팁 & 테크 2007/10/17 10:58
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에 이미지 버튼을 사용할때는 이미지의 높이를 짝수로 하는 것이 코드를 단순화하는데 좋다.

'팁 & 테크' 카테고리의 다른 글

Adobe UI font를 로딩할 수가 없다는 경고창이 뜰때  (0) 2007/10/18
input 태그에 이미지 사용팁  (0) 2007/10/17
XHTML1.0의 문서구조  (0) 2007/10/15
일러스트 미리보기가 가능하려면  (0) 2007/10/12
Posted by actionshin
트랙백이 없고 , 댓글이 없습니다.
이전 다음