수다닷컴

IE8을 사용했을 때 호환성여부 키를 부를 때와 그렇지 않을 때 차이가 납니다.

왜 아랫것은 괜찮은데, 위의 그림에서만 뚜껑처럼 간격이 벌어지는 걸까요?
익스플로에서 호환성보기할때와 하지 않았을 때 이렇게 벌어집니다.
선배님들 조언 부탁드립니다.

참고: 비쥬얼스투디오 2008에서 작업하고 있습니다.

[CSS]
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {padding:0; margin:0;}

#header .lnb ul {position：absolute; top:8px; right:172px;}
body {font:12px arial, gulim, 굴림, dotum, 돋움, AppleGothic, sans-serif;text-align:center; color:#494949;}
#header {position:relative; width:890px; margin:0 auto 8px auto; text-align:left; z-index:3;}
#header ul .headLeft{background : #FFF url(../image/leftconerBanner.png) no-repeat left bottom; width :5px; height : 15px ; float :left; }
#header ul .headMiddle {background : #FFF url(../image/bodycenterBanner.png) repeat-x left bottom; height : 15px ; float :left ; }
#header ul .headRight {background : #FFF url(../image/rightconerBanner.png) no-repeat left bottom; width :5px; height : 15px ; float :left; }
#header ul .colum { clear :both ; border-left : solid 2px #9FBDE5; border-right : solid 2px #9FBDE5; height : auto; }
#header ul .bottomLeft {background : #FFF url(../image/leftbottomBanner.png) no-repeat left top; width :5px; height : 15px ; float :left }
#header ul .bottomMiddle {background : #FFF url(../image/bodybottomBanner.png) repeat-x left top; height : 15px ; float :left ; }
#header ul .bottomRight{background : #FFF url(../image/rightbottomBanner.png) no-repeat left top; width :5px; height : 15px ; float :left }

#header #gnb { margin-top : 0px;}
#header #gnb li {float:left;}

[code]
div id = header

ul
li style = float : left ;
ul style = width : 290px; float:left ; border : solid 1px green;
li class = headLeft/li
li class = headMiddle style = width :280px;/li
li class = headRight/li
li style = width : 286px; margin:0px 0px 0px 0px; class = colum
오늘마감
/li
li class = bottomLeft/li
li style = width :280px; class = bottomMiddle/li
li class = bottomRight/li
/ul
/li
li style = float : left ;
ul style = width : 60px; float:left ; border : solid 1px green;
li class = headLeft/li
li class = headMiddle style = width :50px;/li
li class = headRight/li
li style = width : 56px; class = colum
오늘마감
/li
li class = bottomLeft/li
li style = width :50px; class = bottomMiddle/li
li class = bottomRight/li
/ul
/li
/ul

/div

신청하기