티스토리 뷰
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 {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에서 a태그 사용시 밑줄이 너무 붙어버리는 현상 (0) | 2010.01.18 |
|---|---|
| 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 |
댓글