IE7에서 text-decoration: underline 이 이상하게 표현될 때가 있습니다.
조금 더 정확하게 표현을 하자면 밑줄이 제자리에 있지 않는 증상이죠.
font-family가 어떤것이냐에 따라 1px 올라가느냐 2px이 올라가느냐 정도의 차이가 있습니다.
문제의 원인은
해결책은 아주 간단합니다. vertical-align: middle의 객체를 div같은 display:block으로 감싸주면 되죠. 만약 이 객체의 우측에 위치해야 한다면 float: left로 Positioning을 해주시면 됩니다.
그 외 세세한것들은 디자인에 맞춰서 Styling 하면 되는것이죠.
위 스크린샷의 HTML&CSS 코드 입니다.
조금 더 정확하게 표현을 하자면 밑줄이 제자리에 있지 않는 증상이죠.
font-family가 어떤것이냐에 따라 1px 올라가느냐 2px이 올라가느냐 정도의 차이가 있습니다.
문제의 원인은
- vertical-align:middle속성을 가진 DOM이
- text-decoration: underline 속성을 가진 DOM과
- 같은 레벨에 있을때
IE7에서 같은 레벨상에 vertical-align: middle의 DOM이 있을경우 text-decoration: underline인 DOM이 이상하게 표현되는 경우
해결책은 아주 간단합니다. vertical-align: middle의 객체를 div같은 display:block으로 감싸주면 되죠. 만약 이 객체의 우측에 위치해야 한다면 float: left로 Positioning을 해주시면 됩니다.
그 외 세세한것들은 디자인에 맞춰서 Styling 하면 되는것이죠.
위 스크린샷의 HTML&CSS 코드 입니다.
<h2>해결</h2>
<p>vertical-align:middle 객체를 div같은 display:block으로 감싸면 해결이 됩니다. 디자인에 따라 float을 부여하고 Styling을 하시면 됩니다.</p>
<p>
<div style="float:left"><input type="text" style="vertical-align:middle;width: 160px" value="vertical-align:middle" /></div>
<div style="float:left;padding:2px 0 0 5px">
<span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
<a href="#">It's a: 이것은 a입니다</a>
</div>
</p>
<p style="clear: both">
<div style="float: left"><img src="vami.gif" style="vertical-align: middle" /></div>
<div style="float:left;padding:15px 0 0 5px">
<span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
<a href="#">It's a: 이것은 a입니다</a>
</div>
</p>
<p>vertical-align:middle 객체를 div같은 display:block으로 감싸면 해결이 됩니다. 디자인에 따라 float을 부여하고 Styling을 하시면 됩니다.</p>
<p>
<div style="float:left"><input type="text" style="vertical-align:middle;width: 160px" value="vertical-align:middle" /></div>
<div style="float:left;padding:2px 0 0 5px">
<span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
<a href="#">It's a: 이것은 a입니다</a>
</div>
</p>
<p style="clear: both">
<div style="float: left"><img src="vami.gif" style="vertical-align: middle" /></div>
<div style="float:left;padding:15px 0 0 5px">
<span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
<a href="#">It's a: 이것은 a입니다</a>
</div>
</p>
'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글
| 헤딩 제대로 사용하기. - 후편(완)- (3) | 2010/01/09 |
|---|---|
| 헤딩 제대로 사용하기(시멘틱 마크업하기). -전편- (2) | 2010/01/06 |
| IE7에서 text-decoration이 이상하게 나올때. (0) | 2009/02/02 |
| Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기 (4) | 2008/11/27 |
| [JS] IE6인지 구분하기 (0) | 2008/08/20 |
| CSS Frameworks (0) | 2008/08/01 |
댓글을 달아 주세요