IE7 overflow:hidden bug(?)
script 2008. 11. 21. 16:51css 속성중에 overflow란 속성이 있다.
간단히 설명하면 ~ 어떤 한 테두리영역에 크기를 정한 후 그 안에 내용을 보여주고자 할 때 테두리크기는 고정하며 안에 내용이 더 크기가 클 때에는 테두리영역만큼만 보여주게 할 수가 있다.
예를 들면 텍스트 롤링이나 배너 롤링 같은 곳에 사용한다.
그런데 잘 사용하던 중 dtd와 ie7의 조합으로 hidden 속성이 안 되는 사태가..
소스를 보면서 삽질의 결과를...ㅎ
<html>
<head>
<title></title>
</head>
<body>
<div style="width:500px; height:200px; border:2px solid #000000; overflow:hidden;">
<div style="position:relative; width:300px; height:300px; border:2px solid #ccc;"></div>
</div>
</body>
</html>
<head>
<title></title>
</head>
<body>
<div style="width:500px; height:200px; border:2px solid #000000; overflow:hidden;">
<div style="position:relative; width:300px; height:300px; border:2px solid #ccc;"></div>
</div>
</body>
</html>
가장 기본이 되는 소스. 테두리는 검은색 div, 안에 내용은 회색 div
결과는..
다음으로는 문제였던 dtd를 추가
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="width:500px; height:200px; border:2px solid #000000; overflow:hidden;">
<div style="position:relative; width:300px; height:300px; border:2px solid #ccc;"></div>
</div>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:500px; height:200px; border:2px solid #000000; overflow:hidden;">
<div style="position:relative; width:300px; height:300px; border:2px solid #ccc;"></div>
</div>
</body>
</html>
dtd를 추가한 후에 결과는 ..
안에 있는 회색 테두리가 삐져 나왔다..
IE7에서만 이렇게 나온다..그래서 해결법은
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="position:relative; width:500px; height:200px; border:2px solid #000000; overflow:hidden;">
<div style="position:relative; width:300px; height:300px; border:2px solid #ccc;"></div>
</div>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<div style="position:relative; width:500px; height:200px; border:2px solid #000000; overflow:hidden;">
<div style="position:relative; width:300px; height:300px; border:2px solid #ccc;"></div>
</div>
</body>
</html>
테두리인 div style에 position:relative 추가 !
'script' 카테고리의 다른 글
| [Link] jQuery Ajax Experience Framework Videos (0) | 2009.02.20 |
|---|---|
| javascript getYear() 보다는 getFullYear() (1) | 2009.01.15 |
| [Link] Ajax를 마스터 하자 ! (0) | 2009.01.14 |
| javascript 날짜 계산 (1) | 2009.01.12 |
| escapeUrl (0) | 2008.12.07 |
| xhtml dtd (0) | 2008.10.04 |
| offsetTop / offsetLeft (0) | 2008.10.01 |
| [Link] 고급 JavaScript 작성하기 (0) | 2008.09.25 |
| window.open() 팝업 (0) | 2008.09.23 |
| SyntaxHighlighter(Code google) Supported languages (0) | 2008.09.11 |