IE7에서 text-decoration이 이상하게 나올때.

IE7에서 text-decoration: underline 이 이상하게 표현될 때가 있습니다.
조금 더 정확하게 표현을 하자면 밑줄이 제자리에 있지 않는 증상이죠.
font-family가 어떤것이냐에 따라 1px 올라가느냐 2px이 올라가느냐 정도의 차이가 있습니다.

문제의 원인은

  1. vertical-align:middle속성을 가진 DOM이
  2. text-decoration: underline 속성을 가진 DOM과
  3. 같은 레벨에 있을때

나타납니다. 아마 IE7의 Bug인것 같네요.

해결책은 아주 간단합니다. 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>

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중