2007/06/08 01:01 :: 개발자 생활
internet explorer 6에서는 div에 float와 margin을 같이 사용하는 경우에 margin의 left 또는 right 값이 지정해 준 값의 두배가 되는 버그가 있습니다. 아래 예제를 봅시다.
<html>
<head>
<style type="text/css">
<!--
#test {
margin: 0 0 0 50px;
border: 1px solid #000;
width: 100px;
height: 100px;
float: left;
}
-->
</style>
</head>
<body>
<table width="100" bgcolor="#000000">
<tr><td>100px</td></tr>
</table>
<div id="test">
</div>
</body>
</html>
<head>
<style type="text/css">
<!--
#test {
margin: 0 0 0 50px;
border: 1px solid #000;
width: 100px;
height: 100px;
float: left;
}
-->
</style>
</head>
<body>
<table width="100" bgcolor="#000000">
<tr><td>100px</td></tr>
</table>
<div id="test">
</div>
</body>
</html>
위의 예제는 100픽셀의 크기를 가늠하기위해서 100픽셀 짜리 table과 그아래에 넓이가 100픽셀 높이가 100픽셀인 div를 표시했습니다.
DIV는 눈에 잘 뛰게 하기 위해서 border를 1픽셀 두깨로 주었구요. left margin을 50픽셀 만큼 주었습니다.
그리고 왼쪽으로 붙이기 위해서 float: left;를 주었습니다.
위의 예제를 IE7과 IE6에서 각각 실행해보면 다른 모양으로 표시되는것을 볼 수 있습니다. 다시 말하면 IE6에서는 잘못 표시되고 있다고 봐야지요. margin을 50px을 주었는데도 100픽셀이 margin된것을 볼수 있습니다.
이런 오류를 해결하기 위해서 기본적으로 block 형태를 가지는 div 태그를 inline 형태로 표시해 주도록 설정해 주면 해결이 됩니다. 아래는 수정한 소스 입니다.
<html>
<head>
<style type="text/css">
<!--
#test {
margin: 0 0 0 50px;
border: 1px solid #000;
width: 100px;
height: 100px;
float: left;
display: inline;
}
-->
</style>
</head>
<body>
<table width="100" bgcolor="#000000">
<tr><td>100px</td></tr>
</table>
<div id="test">
</div>
</body>
</html>
<head>
<style type="text/css">
<!--
#test {
margin: 0 0 0 50px;
border: 1px solid #000;
width: 100px;
height: 100px;
float: left;
display: inline;
}
-->
</style>
</head>
<body>
<table width="100" bgcolor="#000000">
<tr><td>100px</td></tr>
</table>
<div id="test">
</div>
</body>
</html>
이올린에 북마크하기
