익스 브라우저에서만 css가 잡히지 않고 있습니다.

익스 브라우저에서만 css가 잡히지 않고 있습니다.

QA

익스 브라우저에서만 css가 잡히지 않고 있습니다.

본문

링크된 것은 그누보드가 설치된 서버에 업로드한 소스 입니다. 

 

우선 다음의 경우는 IE/파폭/크롬/오페라/사파리 모두 아래와 같이 동일하게 보여지고 제 기능을 합니다. 

1. 그누보드가 설치된 서버에 업로드 후 웹에서 출력했을 때

2. 로컬 경로로 출력했을 때

c51da80cf4a65876e9d23653e82974aa_1411168876_0195.jpg
 

 

 

 

그런데 x이크샵 쇼핑몰 메인 상단영역에 직접 소스를 삽입하고 웹에서 확인할 경우엔 아래처럼 메인메뉴가 틀어지면서

서브메뉴 일부가 일부 구석에 출력되고, 이로인해 로고 및 써치박스, 탑메뉴가 화면에서 벗어났는지 보이질 않습니다.

그리고 이 증상은 IE(6~11)에서만 동일하게 나타납니다. 다른 브라우저는 이상이 없구요. 

c51da80cf4a65876e9d23653e82974aa_1411169230_5.jpg 

 

 

 

 

마지막으로 테스트해본 결과로는 아래의 위치에서  

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 등)

답변을 작성하시기 전에 로그인 해주세요.
전체 60
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT