익스 브라우저에서만 css가 잡히지 않고 있습니다.
관련링크
본문
링크된 것은 그누보드가 설치된 서버에 업로드한 소스 입니다.
우선 다음의 경우는 IE/파폭/크롬/오페라/사파리 모두 아래와 같이 동일하게 보여지고 제 기능을 합니다.
1. 그누보드가 설치된 서버에 업로드 후 웹에서 출력했을 때
2. 로컬 경로로 출력했을 때
그런데 x이크샵 쇼핑몰 메인 상단영역에 직접 소스를 삽입하고 웹에서 확인할 경우엔 아래처럼 메인메뉴가 틀어지면서
서브메뉴 일부가 일부 구석에 출력되고, 이로인해 로고 및 써치박스, 탑메뉴가 화면에서 벗어났는지 보이질 않습니다.
그리고 이 증상은 IE(6~11)에서만 동일하게 나타납니다. 다른 브라우저는 이상이 없구요.
마지막으로 테스트해본 결과로는 아래의 위치에서
inline 값일 경우에 위와 같은 증상이 나오고,
inline-block 의 경우 IE에서 메인메뉴가 정상적으로 보이지만 기타 다른 브라우저에서 메뉴항목이 모두
가운데로 겹치는 현상이 나타납니다. 이러지도 저러지도 못하게요 ㅎ;
ul > li
{
display: inline;
}
크로스브라우징 테스트는 다름 링크에서 했습니다. https://saucelabs.com/scout
아래는 전체소스 입니다.
<!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
이미지나 CSS링크를 "절대경로"로 설정해보시거나
예) http://asdf.com/css/style.css
다른 css와 충돌일어나는지 체크 하셔야 할거 같습니다 (메이크샾에서 제공해주는 css 등)
답변을 작성하시기 전에 로그인 해주세요.
