오늘도 어김없이 나의 발목을 잡는 IE 6.
min-height 속성을 줄 방법을 찾다가
구글에서 CSS 핵을 발견했다.+_+오예~
selector {
min-height:500px;
height:auto !important;
height:500px;
}
한 셀렉터 안에서 같은 속성을 여러번 작성했을 경우
IE6은 가장 마지막에 선언한 녀석을 가져가기 때문에 맨 마지막에 적는다.
만쉐이.
출처 : http://www.dustindiaz.com/min-height-fast-hack/
Posted by mkyoon
Trackback URL : http://mkyoon.com/trackback/71
mkyoon님의 블로그에서 알게 된 팁입니다. 해보니 잘 되네요. :) 거기서는 또 여기(www.dustindiaz.com)를 출처로 꼽고 있습니다. 저 링크에서 아래 답글부분도 읽어보면 도움이 됩니다. skin.html 에서 이렇게 하고 <div id="mybox1"> 이런저런 </div> 그리고, style.css 에서는 #mybox1 { min-height:600px; height:auto !important; height:600px; } 이렇..
아마티 2007/10/26 14:58 # M/D Reply Permalink
IE는 원래 min-height 속성을 지원하지 않는다고 하죠.
그런데 min-height와 똑같은 속성을 지원하는게 height입니다. 다만 이 속성은 다른 브라우저에서는 높이가 고정되기 때문에 height에 IE핵을 주면 되지 않을까 싶어요. 제가 그렇게 쓰거든요 ^^;;;;
min-height:500px; _height:500px; 이렇게 쓰면 대부분 작동하더라구요 ^^
mkyoon 2007/10/26 17:04 # M/D Permalink
굳이 IE핵을 쓰지 않더라도 다른 브라우저에서는 height: auto 로 인식하게 됩니다. important를 선언했기 때문이죠. 그래도 핵을 써서 완전히 배제해버리는 방법도 있었네요^^ 좋은의견 감사합니다.
mkyoon 2008/03/28 13:30 # M/D Permalink
헉; 지금 보니 윗 글에 약간 잘못된 내용이 있었네요~
height: auto는 IE에서 읽는다고 써놓았었네요 ㅠㅠ
아마티님은 그부분을 지적하신 것 같은데, 제가 잘못 이해하고 답변을 달았던 것 같습니다.
너무 늦었지만 감사드려요~
jsjung 2008/03/27 17:54 # M/D Reply Permalink
dtd 가 4.01 Transitional 일때는 안되는것 같습니다.
밑에처럼 하니까 되네요~
selector {
min-height:500px;
height:500px;
height:auto !important;
}
mkyoon 2008/03/28 10:36 # M/D Permalink
IE6에서도 정말 되던가요+_+
IE6은 하나의 selector 안에 같은 속성이 여러번 정의되어 있을 경우, 마지막에 써있는 것만을 읽어들이기 때문에, jsjung님 말씀대로 하셨다면 분명 높이는 auto로 될 것이고요. 그렇담 height가 300px로 작아질 경우 500px이 아닌 300px로 될것 같은데요~
여담이지만, DTD설정을 하셨다면 DTD종류와 관계 없이 브라우저는 표준모드로 렌더링을 하기 때문에 거의 같은 모습을 보여주게 됩니다. (strict에서는 속성에 대한 제한이 많아지긴 하지만요~)
위의 소스는 xhtml 1.0 transitional에서 직접 테스트 해보았고 문제가 없었습니다. 같은 transitional DTD를 쓰시는데 안된다면 뭔가 다른 문제가 있지 않았나~ 조심스럽게 예상해 봅니다.
jsjung 2008/03/31 10:40 # M/D Reply Permalink
에고..mkyoon님께서 조심스럽게 예상했던 문제가 맞는것 같습니다..ㅎㅎ
다시 테스트해보니 제대로 랜더링 되네요~..^^
넘 성급하게 리플을 달았네요~ㅎㅎ
http://starpl.com/mkyoon http://twitter.com/mkyoon http://facebook.com/mkyoon
- mkyoon