티스토리 뷰

CSS/UI

IE6에서 a태그 사용시 밑줄이 너무 붙어버리는 현상

highca 2010. 1. 18. 17:52
문제점

IE6에서 a태그 옆에 img 태그가 위치할 경우 텍스트 언더라인(underline)이 텍스트에 너무 붙어 보기가 이상한 문제. 단, 파이어폭스나 IE8등 다른 브라우저에서는 별다른 문제 없음.

IE6 IE8 FireFox 3.6
 Chrome 3.0

모든 경우에 그런 것은 아니며, 아래 예제 소스와 같이 특정한 경우에만 발생된다. 위 표에서 보면 알 수 있듯, IE6을 제외한 다른 브라우저에서는 텍스트와 밑줄 사이의 여백이 적당히 있어 보기가 나쁘지 않지만 IE6에서는 너무 붙어있어 보기가 좋지 않다.


예제 소스

<style>
body {font-size:9pt; font-family:굴림,Gulim,돋움,Verdana,sans-serif;}
img {vertical-align:middle;}
a, a:visited {color:#03C;}
</style>
</head>
<body>
    <a href="#">하하하</a> <img src="images/ico_n.gif" />
</body>


발생 원인
  • body에 선언된 한글 폰트 문제 (굴림, Gulim, 돋움, Dotum)
  • img에 선언된 vertical-align:middle 속성

해결 방법
  • 선언한 한글폰트를 삭제하거나 img에 적용된 vertical-align:middle 을 삭제한다. (둘 다 삭제해도 된다)
  • 둘 중 하나라도 삭제하기 싫으면 a 태그에 display:inline-block 속성을 추가한다. (a 태그의 길이가 두 줄 이상이 될 때 이미지가 옆에 오지 않고 한칸 밑으로 내려가는 문제가 발생될 수 있다)



'CSS/UI' 카테고리의 다른 글

IE6에서 div가 select에 가려지는 현상 해결법  (0) 2010.01.05
IE6,7 에서 position:relative, position:absolute 속성의 z-index 버그  (4) 2009.06.15
크롬(Chrome) 2.0 에서 CSS 해석 문제  (1) 2009.05.28
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함