링크된 것은 그누보드가 설치된 서버에 업로드한 소스 입니다.
우선 다음의 경우는 IE/파폭/크롬/오페라/사파리 모두 아래와 같이 동일하게 보여지고 제 기능을 합니다.
1. 그누보드가 설치된 서버에 업로드 후 웹에서 출력했을 때
2. 로컬 경로로 출력했을 때
그런데 x이크샵 쇼핑몰 메인 상단영역에 직접 소스를 삽입하고 웹에서 확인할 경우엔 아래처럼 메인메뉴가 틀어지면서
서브메뉴 일부가 일부 구석에 출력되고, 이로인해 로고 및 써치박스, 탑메뉴가 화면에서 벗어났는지 보이질 않습니다.
그리고 이 증상은 IE(6~11)에서만 동일하게 나타납니다. 다른 브라우저는 이상이 없구요.
마지막으로 테스트해본 결과로는 아래의 위치에서
inline 값일 경우에 위와 같은 증상이 나오고,
inline-block 의 경우 IE에서 메인메뉴가 정상적으로 보이지만 기타 다른 브라우저에서 메뉴항목이 모두
가운데로 겹치는 현상이 나타납니다. 이러지도 저러지도 못하게요 ㅎ;
Copy
ul > li{ display: inline;}크로스브라우징 테스트는 다름 링크에서 했습니다. https://saucelabs.com/scout
아래는 전체소스 입니다.
Copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Untitled-1</title><meta http-equiv="Content-Type" content="text/html; charset=euc-kr"><head><style type="text/css">#se{ background: url(./img/top-bg.png) repeat-x; height: 30px;}#se .fav{ position: absolute; right: 640px; top: 0px;}#se .fav a{ color: #948689; font: normal 11px dotum; letter-spacing: 0px; text-decoration: none;}#se .fav a{ margin: 0 0px 0 0; padding: 1px 0px 0 0;}#se .fav a:hover{ text-decoration: none;}#se .fav a{ background: url(./img/) right 2px no-repeat;}#se .info{ position: absolute; right: 410px; top: 30px;}#se .info li{ display: inline; margin-left: -5px;}#se .menu{ color: #aaa; font-family: dotum; font-size: 10.5px; font-weight: 300; position: absolute; right: 10px; top: 10px;}A.roll img{ border: 0; display: inline;}A.roll img.over{ display: none;}A.roll:hover{ border: 0;}A.roll:hover img{ display: none;}A.roll:hover img.over{ display: inline;}A.roll span{ display: inline; font-family: nanumgothic; font-size: 11px;}A.roll span.over{ color: #FF0000; display: none;}A.roll:hover{ border: 0;}A.roll:hover span{ display: none;}A.roll:hover span.over{ display: inline; font-family: nanumgothic; font-size: 11px;}A.roll_b span{ display: inline;}A.roll_b span.over{ color: #777; display: none; font-weight: bold;}A.roll_b:hover{ border: 0;}A.roll_b:hover span{ display: none; font-family: dotum;}A.roll_b:hover span.over{ display: inline;}#floating{ margin-right: 0px; position: fixed; right: 0%; text-align: none; top: 0px; width: 100%; z-index: 99999;}.logo{ align-items: center; border: 0; display: block; justify-content: center; padding-top: 60px; z-index: 9999;}#sch{ height: 30px;}.search{ position: absolute; right: 10px; top: 145px;}#nav{ background: #fff; padding-top:16px; border-bottom: solid #eaeaea 1px; border-top: solid #dadada 1px; height: 42px; margin-top: 0px; width: 100%; z-index: 99999;}ul{ text-align: center; left: 50%; margin-left: -100px; width: 100%;}ul li{ cursor: pointer; font: 14px Verdana, 'Lucida Grande'; font-weight: bold; margin-top: -15px; moz-transition: padding .05s linear; ms-transition: padding .05s linear; o-transition: padding .05s linear; transition: padding .05s linear; webkit-transition: padding .05s linear;}ul li.drop{ position: relative;}ul > li{ display: inline;}ul li a{ color: #777; height: 80px; line-height: 3px; moz-transition: all .1s ease-out; ms-transition: all .1s ease-out; o-transition: all .1s ease-out; padding: 0 20px; text-decoration: none; transition: all .1s ease-out; webkit-transition: all .1s ease-out;}ul li a:hover{ color: #eee; font: 14px Verdana, 'Lucida Grande'; font-weight: bold;}.dropOut .triangle{ border-bottom: 6px solid #ff0000; border-left: 6px solid transparent; border-right: 6px solid transparent; height: 0; left: 50%; margin-left: -8px; opacity: 0.5; position: absolute; top: -8px; width: 0;}.dropdownContain{ left: 50%; margin-left: -80px; position: absolute; top: -400px; width: 160px; z-index: 2;}.dropOut{ background: white; border-radius: 2px; box-shadow: 0 1px 6px rgba(0,0,0,.15); float: left; margin-top: 0px; moz-border-radius: 2px; moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); moz-transition: all .1s ease-out; ms-transition: all .1s ease-out; opacity: 0; o-transition: all .1s ease-out; position: relative; transition: all .1s ease-out; webkit-border-radius: 2px; webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); webkit-transition: all .1s ease-out; width: 160px;}.dropOut ul{ float: left; padding: 10px 0;}.dropOut ul li{ border-radius: 2px; color: #777; float: left; font-weight: 300; margin: 0px 5px; /* 메인메뉴 좌우 이동시 함께 수정(서브메뉴 좌우위치)*/ moz-border-radius: 2px; moz-transition: background .1s ease-out; ms-transition: background .1s ease-out; o-transition: background .1s ease-out; padding: 10px 0 10px 0px; text-align: left; transition: background .1s ease-out; webkit-border-radius: 2px; webkit-transition: background .1s ease-out; width: 160px;}.dropOut ul li:hover{ background: #f6f6f6; width: 150px;}ul li:hover a{ color: #777; margin-left: -0px;}ul li:hover .dropdownContain{ top: 0px;}ul li:hover .underline{ border-bottom-color: #777;}ul li:hover .dropOut{ margin-top: 50px; opacity: 1;}/* 요소(element) 여백 초기화 */html, body,div, span,dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6,blockquote, p, address, pre, cite,form, fieldset, input, textarea, select,table, th, td, img {margin:0;padding:0;} /* 제목요소 */h1, h2, h3, h4, h5, h6 { font-size:100%; /* font-weight:normal; */ } /* 테두리 없애기 */fieldset, img, abbr,acronym { border:0 none; } /* 목록 */ol, ul { list-style:none; } /* 테이블 - 마크업에 'cellspacing="0"' 지정 */table {/* border-collapse: separate;border-spacing:0; *//* border:0 none; */}caption, th, td {/* text-align:left;font-weight: normal; *//* border:0; */} /* 텍스트 관련 요소 초기화 */address, caption, em, cite {font-weight:normal;font-style:normal;}ins { text-decoration:none; }del { text-decoration:line-through; } /* 인용문 */blockquote:before, blockquote:after, q:before, q:after { content:""; }blockquote,q { quotes:"" ""; } /* 수평선*/hr { display:none; } /* 숨김 요소 */legend, #header h2, #slogan h2, #footer h2 {position:absolute;overflow:hidden;width:1px;height:1px;font-size:0;line-height:0;}/* body 스타일 */body {color:#000;font-size:75%;line-height:1.2;font-family : 굴림, 'Gulim' ; font-size:15px; } /* 링크 */a, a:link {color:#666;text-decoration:none;} a:visited {color:#666;text-decoration:none;}a:hover {color:#666;text-decoration: none;}a:focus {color:#666;font: 14px Verdana, 'Lucida Grande';text-decoration:underline;}a:active {color:#666;text-decoration:none;} /* 이미지, 폼관련 요소 */img {vertical-align:top;}label, select, input, textarea {vertical-align:middle;}/* -------------------------------------------------- */ </style></head><body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onselectstart="return false" oncontextmenu="return false" ondragstart="return false"><div id="floating"> <div id="se"> <div class="fav"> <a class="roll" href="#"><img src="./img/top_01.gif"><img class="over" src="./img/top2_01.gif"></a> <a class="roll" href="#"><img src="./img/top_02.gif"><img class="over" src="./img/top2_02.gif"></a> <a class="roll" href="#"><img src="./img/top_03.gif"><img class="over" src="./img/top2_03.gif"></a> <a class="roll" href="#"><img src="./img/top_04.gif"><img class="over" src="./img/top2_04.gif"></a> <a class="roll" href="#"><img src="./img/top_05.gif"><img class="over" src="./img/top2_05.gif"></a> <a class="roll" href="#"><img src="./img/top_06.gif"><img class="over" src="./img/top2_06.gif"></a> </div> <div class="info"> <a class="roll" href="#"><img src="./img/top_m1_01.gif" style="margin-left:100px; margin-top:-30px;"><img class="over" src="./img/top_m2_01.gif" style="margin-left:100px; margin-top:-30px;"></a> <a class="roll" href="#"><img src="./img/top_m1_02.gif" style="margin-left:-5px; margin-top:-30px;"><img class="over" src="./img/top_m2_02.gif" style="margin-left:-5px; margin-top:-30px;"></a> <a class="roll" href="#"><img src="./img/top_m1_03.gif" style="margin-left:-5px; margin-top:-30px;"><img class="over" src="./img/top_m2_03.gif" style="margin-left:-5px; margin-top:-30px;"></a> </div> <div class="menu"><span style="font-weight:bold; color:#9a9a9a;">BANKING:INFO</span> 국민은행 xxxxxx-01-537007 <span style="font-size:10px;">/</span> ㅇㅇㅇ(ㅇㅇㅇㅇ) </div> </div> </div> <div class="logo" align="center"> <a href="#"><img src="./img/logo.gif" border="0"></a> </div> <div id="sch"> <div class="search"> <table cellpadding="0" cellspacing="0"> <tr> <td width="83" height="11" align="center"> <p style="line-height:100%; margin-top:0; margin-bottom:0;"><span style="font-size:8pt;"><font face="돋움"><input name=search size="15" onKeyDown="topCheckKey_search()" style="font-family:돋움체; font-weight:normal; color:rgb(51,51,51); border-width:1; border-color:rgb(220,216,216); border-style:solid;"></font></span></p> </td> <td width="25" height="11"><p><a href=[SEARCH]><img src="./img/go.gif" border="0"></a><span style="font-size:8pt;"></span></p></td> </tr> </table> </div> </div> <div id="nav"><ul><!--<li><a class="roll_b" href="#"><span>OUTER</span><span class="over">아우터</span></a></li>--><li><a href="#">OUTER</a></li><li class="drop"><a href="#">TOP</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div><ul> <li style="font-size:12px;"><a href="#" style="font-weight:100">SHIRTS</a></li> <li style="font-size:12px;"><a href="#" style="font-weight:100">T-SHIRTS</a></li></ul> </div> </div></li><li class="drop"><a href="#">BOTTOM</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div><ul> <li style="font-size:12px;"><a href="#" style="font-weight:100">PANTS</a></li> <li style="font-size:12px;"><a href="#" style="font-weight:100">TRANNING</a></li></ul> </div> </div></li><li class="drop"><a href="#">ACC.</a> <div class="dropdownContain"> <div class="dropOut"> <div class="triangle"></div><ul> <li style="font-size:12px;"><a href="#" style="font-weight:100">BAG</a></li> <li style="font-size:12px;"><a href="#" style="font-weight:100">SHOES</a></li> <li style="font-size:12px;"><a href="#" style="font-weight:100">BELT</a></li> <li style="font-size:12px;"><a href="#" style="font-weight:100">SOCKS</a></li> <li style="font-size:12px;"><a href="#" style="font-weight:100">CAP</a></li></ul> </div> </div></li><li><a href="#"><font color="#0099FF">BRAND</font></a></li><!--<li class="drop"> <a href="#">BRAND-A</a><div class="dropdownContain"><div class="dropOut"><div class="triangle"></div><ul><li style="background-color:#0099FF; width:140px; opacity:0.5; font-size:14px; color:#FFFFFF; padding-left:10px;">REFLICA</li><li style="font-size:11px;"><a href="#" style="font-weight:100">D*QUARED2</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">D*LCE</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">M*NCLER</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">THOM B.</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">ST*NE</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">B*LMAIN</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">ETC</a></li></ul></div></div><li class="drop"> <a href="#">BRAND-B</a><div class="dropdownContain"><div class="dropOut"><div class="triangle"></div><ul><li style="background-color:#0099FF; width:140px; opacity:0.5; font-size:14px; color:#FFFFFF; padding-left:10px;">SELECT ITEM</li><li style="font-size:11px;"><a href="#" style="font-weight:100">ADAM'S*REAF </a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">SCOT</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">TRIFFER</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">T-MERRTINI</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">BL. CO</a></li><li style="font-size:11px;"><a href="#" style="font-weight:100">ETC</a></li></ul></div></div></li>--><li><a class="roll" href="#"><img src="./img/best_1.png" style="margin-top:-22px;"><img class="over" src="./img/best_2.png" style="margin-top:-22px;"></a></li><li><a class="roll" href="#"><img src="./img/sale_1.png" style="margin-top:-17px;"><img class="over" src="./img/sale_2.png" style="margin-top:-17px;"></a></li><li><a href="#"><font color="#ed5252">WOMAN</font></a></li><li><a href="#">ONLY YOU</a></li></ul></div> </tr> <tr> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </tr></body></html>답변 1개
채택된 답변
+20 포인트
2014-09-22 (월) 11:26:11
이미지나 CSS링크를 "절대경로"로 설정해보시거나
예) http://asdf.com/css/style.css
다른 css와 충돌일어나는지 체크 하셔야 할거 같습니다 (메이크샾에서 제공해주는 css 등)
답변을 작성하려면 로그인이 필요합니다.