2009/02/02 12:58
IE7에서 text-decoration이 이상하게 나올때. 작은 팁2009/02/02 12:58
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>
'작은 팁' 카테고리의 다른 글
| [Rails] 2.2.2 로 개발하던 것을 2.3.2 로 바꿀때. (0) | 2009/04/07 |
|---|---|
| gem으로 mime-types update 혹은 install 시 나는 Error(on Gentoo) (2) | 2009/03/10 |
| IE7에서 text-decoration이 이상하게 나올때. (0) | 2009/02/02 |
| Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기 (4) | 2008/11/27 |
| [JS] IE6인지 구분하기 (0) | 2008/08/20 |
| 코딩 하기 전 에 문서부터 디자인을 하라 (2) | 2008/03/19 |
