ie8 에서 css로 만든 메뉴가 깨지는 현상 질문드려요~
본문
안녕하세요.
쇼핑몰을 완성해서 운영하던중에 xp를 사용하시는 분에게서 메뉴가 깨진다는 제보를 받고 확인해봤습니다.
원래는 이렇게 나오는 메뉴입니다.
헌대 IEtester 라는 프로그램을 깔아 확인해보니
이런식으로 깨집니다.
영카트 5는 이미 ie8버전까지 html5 지원하는건 아는 사실인데 이거 어떻게 해야할지 막막합니다.
구글검색으로 이런저런 태그를 넣어봐도 ie8에선 저상태로 나옵니다. ㅠㅠ
메뉴가 조금 길게 작성되서 따로 php 파일로 만들고 인클루드 시켰습니다. 이게 문제일까요?
<? include_once(G5_PATH."/menu/main01/menu.php"); ?>
이걸 shop/shop.head.php 에 넣어서 불러냈습니다.
하다보니 스타일시트에서도 좀 겹치는 부분이 생기다 보니 따로 css파일을 만들었습니다.
어디서부터 손을대야할지 너무 막막하여 이렇게 질문 올립니다.
php소스는 좀 지저분해서 올리기가 민망합니다. 만약 php파일을 봐야만 알수 있는 문제라면 올려보겠습니다.
선배님들의 고견을 구합니다~
답변 3
하나빠진게 있어 댓글로 올립니다.
메뉴는 ul, li 태그로 css에서 hover 를 주로 사용해서 만들었습니다..
css를 봐야 알수있죠 ㅎㅎ
엑스피면 최대 익스8인데 익스8은 css3미지원, 상당부분 웹표준을 준수하지 않고 있어서
때에 따라서 예외 처리를 해줘야됩니다.
한마디로 익스8은 지멋데로 부라우져입니다.
익스7아주 나쁨, 익스8 나쁨 익스9 그저그럼 익스10 이제좀쓸만하네 정도라고 생각하시면되요 ㅋ
천재중천재님 답변 감사합니다.
css를 보면 확인이 가능하겠군요..
댓글로 올리면 좀 길어질텐데.. 한번 올려보겠습니다.
/*** 메뉴바 테스트 ***/
.nav {
width: 990px;
margin: 0 auto;
padding-top: 1px;
height: 40px;
background-image: url(img/nav_bar.gif);
background-repeat:no-repeat;
}
.nav li { list-style: none;}
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
line-height: 40px;
padding: 0 20px;
letter-spacing:1px;
/* border-right: 1px solid #daedbf;
border-left: 1px solid #619615;
height: 41px;
*/}
.nav > li.a1:hover > a { background: #006da9; color: #fff; }
.nav > li.a1:first-child > a { border-left: 0; margin-left: 1px;}
.nav > li.a1:last-child > a { border-right: 0; }
.nav > li.a1:hover > div { display: block; }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 40px;
display: none;
background: #fff;
padding: 0;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div h3 { padding: 5px; margin-bottom: 3px; color: #fff; background: #349bc4;}
.nav > li > div h3 a { color: #fff; text-decoration: none;}
.nav > li > div li { padding: 3px 0 3px 5px; color: #619a14;}
.nav > li > div li > a { color: #555;}
.nav > li > div li:hover { background-color: #0073aa; }
.nav > li > div li:hover > a { font-weight: bold; color: #fff; text-decoration: none;}
.nav > li > div.right { right: 0; left: auto }
.nav > li > div.left0 { left: 0px; right: auto; border: solid #386000 1px; }
.nav > li > div.left1 { left: -158px; right: auto; border: solid #386000 1px; }
.nav > li > div.left2 { left: -280px; right: auto; border: solid #386000 1px; }
.nav > li > div.left3 { right: -502px; left: auto; border: solid #386000 1px; }
.nav > li > div.left4 { left: -488px; right: auto; border: solid #386000 1px; }
.nav > li > div.left1a { left: -150px; right: auto; border: solid #006da9 1px; }
.nav > li > div.left2a { left: -150px; right: auto; border: solid #006da9 1px; }
.nav > li > div.left3a { right: -621px; left: auto; border: solid #006da9 1px; }
.nav > li > div.left4a { left: -369px; right: auto; border: solid #006da9 1px; }
.nav > li > div.left5 { left: -513px; right: auto; border: solid #006da9 1px; }
.container-1, .container-2, .container-3, .container-4 { font-size: 13px;}
/* COLUMNS */
.img1,.col1,.col2,.col3,.col4,.col5 { margin-bottom: 5px; float: left; padding: 5px 10px;}
/* 1 Column */
.container-1 { width: 988px; }
.container-1 .col1 { width: 300px; }
.container-1 .plus { width: 750px; }
/* 2 Column */
.container-2 { width: 988px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 988px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 988px; }
.container-4 .col1 { width: 185px; padding-top: 0;}
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 80% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 988px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* a Column */
.container-a { width: 988px; }
.container-a .col1 { width: 20%; }
.container-a .col2 { width: 40% }
.container-a .col3 { width: 60% }
.container-a .col4 { width: 80% }
.container-a .col5 { width: 100% }
/* a Column */
.container-6 { width: 988px; }
.container-6 .col1 { width: 142px; }
.container-6 .col2 { width: 304px; }
.container-6 .col3 { width: 48% }
.container-6 .col4 { width: 64% }
.container-6 .col5 { width: 80% }
.container-6 .col5 { width: 100% }
.img1 {
width: 150px;
padding: 0;
margin: 0;
background: #349bc4;}
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
/*.nav a.a1:after
{
content: url("../arrow.gif");
background-image: url("../arrow.gif");
background-repeat:no-repeat;
background-position:right center;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
h3 {
font-size: 13px;
margin-top: 0px;
color: #006da9;
}
.h4 {
font-size: 13px;
font-weight: bold;
line-height: 27px;
padding-left: 20px;
margin-bottom: 5px;
background-color: #518408;
}
.b1 {
padding-left: 5px;
}
.b2 {
font-size: 13px;
color: #548410;
}
.b3 {
font-size: 13px;
color: #006da9;
}
.b3 a {
font-size: 13px;
color: #006da9;
}
.b4 {
font-size: 13px;
color: #fff;
}
/*.c1 {
width: 163px;
margin: 0;
padding: 0;
float: left;
}
*/
.c2 {
font-size: 12px;
}
.mega-menu ul, .mega-menu ul li {list-style: none;}
.mega-menu ul {position: relative; padding: 0; margin: 0;}
.mega-menu ul li ul {display: none;}
.mega-menu .sub {display: none;}
.mega-menu .sub ul {display: block;}
.green {font: normal 13px Arial, sans-serif; line-height: 16px;}
.green ul.mega-menu, .green ul.mega-menu, .green ul.mega-menu li {margin: 0; padding: 0; border: none;}
.green ul.mega-menu {background: #222 url(images/bg_green.png) repeat-x 0 -80px; width: 100%; height: 40px; border-right: 1px solid #94cd0b; border-left: 1px solid #94cd0b; position: relative;}
.green ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 13px; font-weight: bold;}
.green ul.mega-menu li a {float: left; display: block; color:#3e5130; padding: 12px 38px 12px 25px; background: url(images/bg_green.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;} /* color:1차메뉴색, */
.green ul.mega-menu li a.dc-mega {position: relative;}
.green ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 8px; height: 6px; top: 18px; right: 15px; background: url(images/arrow.png) no-repeat 0 100%;}
.green ul.mega-menu li.mega-hover a, .green ul.mega-menu li a:hover {background-position: 100% -40px; color: #3e5130; text-shadow: none;} /* color:1차메뉴오버시색상 */
.green ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;}
.green ul.mega-menu li .sub-container {position: absolute; background: url(images/bg_sub_left.png) no-repeat 0 100%; padding-left: 20px; margin-left: -3px;}
.green ul.mega-menu li .sub {background: url(images/bg_sub.png) no-repeat 100% 100%; padding: 20px 20px 20px 10px;}
.green ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;}
.green ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;}
.green ul.mega-menu li .sub li {list-style: none; float: none; width: 200px; font-size: 1em; font-weight: normal;} /* width:2차메뉴 폭 */
.green ul.mega-menu li .sub li.mega-hdr {margin: 13px 10px 0px 0; float: left;} /* margin:2차메뉴타이틀 상단여백 */
.green ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;}
.green ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}
.green ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #528409; text-transform: uppercase; font-weight: bold; color: #fff; } /* 2차메뉴타이틀 - color:글자색, background:배경색 */
.green ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #fff; text-shadow: none;}
.green ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(images/arrow_off.png) no-repeat 5px 8px; font-weight: normal; color:#537a13;} /* color:2차메뉴글자색 */
.green ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(images/arrow_on.png) no-repeat 5px 8px;}
.green ul.mega-menu .sub ul li {padding-right: 0;}
.green ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;}
.green ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}
.green ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(images/arrow_off.png) no-repeat 7px 10px;}
.green ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(images/arrow_on.png) no-repeat 7px 10px;}
이상입니다.
어느부분을 예외처리해주어야 할까요?
