'IE7'에 해당되는 글 2건

  1. 2009/02/02
    IE7에서 text-decoration이 이상하게 나올때.
  2. 2007/12/27
    IE 7 에서 dt, dd 좌측여백이 생기는 문제 (2)

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

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

문제의 원인은
  1. vertical-align:middle속성을 가진 DOM이
  2. text-decoration: underline 속성을 가진 DOM과
  3. 같은 레벨에 있을때
나타납니다. 아마 IE7의 Bug인것 같네요.
증상의 스크린샷

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>

크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[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
Posted by Johan Kim 기다림
tag CSS, IE7, text-decoration, vertical-middle
Trackback 0 And Comment 0

IE 7 에서 dt, dd 좌측여백이 생기는 문제

| 작은 팁 2007/12/27 19:18
IE7에서 dt, dd중 dt를 display:none을 했는데도 dd의 좌측 여백이 여전이 존재한다.(물런 margin,padding 모두 0)
<dt style="display:none;margin:0;padding:0">Title</dt>
<dd style="margin:0;padding:0">Description</dd>

해결책은 의외로 쉽다.
dl로 감싸주면 된다.

<dl style="margin:0;padding:0">
    <dt style="display:none;margin:0;padding:0">Title</dt>
    <dd style="margin:0;padding:0">Description</dd>
</dl>

FF때문에 dl 에 margin,padding을 0을 줘야 한다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제  (0) 2007/12/28
CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (4) 2007/12/28
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (2) 2007/12/27
JSSpec용 EditPlus ACP,STX 파일  (0) 2007/12/05
EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)  (2) 2007/10/01
[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (2) 2007/08/31
Posted by Johan Kim 기다림
tag CSS, dd, DL, DT, IE7, margin, 여백, 좌측여백
Trackback 0 And Comment 2
prev Prev [1] Next next