2012-03-07 2 views
0

안녕하세요. 저는 누군가 IE8에서 볼 때 IE9에서 현재보고있는 내용을 얻으려면 무엇을 변경해야하는지 알려주 길 바라고 있습니다. CSS 포털은 IE9에서 잘 보입니다. IE8에서 차단되었습니다.

는 모습입니다 IE9에서 같은 :

그리고이 보이는 것입니다 IE8에서 같은 :

두 div를위한 CSS 코드는 다음과 같습니다

body { 
text-align:left; 
font-size:13px; 
font-family:Arial, Helvetica, sans-serif; 
line-height:18px; 
color:#6a7e8a; 
background:#fff; 
margin:0; 
padding:0; 
} 

#logo span { 
color:#fff; 
padding-left:50px; 
text-transform:none; 
font-family:arial, sans-serif; 
} 

#logo span.header1 { 
font-size:0.4em; 
display:block; 
top:0; 
line-height:0.8em; 
} 

.logoheader h1 a { 
text-decoration:none !important; 
} 

.logoheader { 
top:22px; 
left:0; 
text-decoration:none !important; 
border:none !important; 
position:absolute; 
color:#fff; 
z-index:10; 
} 

.logoheader h1 { 
border:none !important; 
} 


.logoheader2 { 
    top:5px; 
    left:398px; 
    text-decoration:none !important; 
    border:none !important; 
    position:absolute; 
    color:#fff; 
    z-index:10; 
    height: 144px; 
    width: 521px; 
} 



#line { 
    position:absolute; 
    right:20px; 
    top:5em; 
    max-width:38em; 
    padding:5px 0 2px 2px; 
} 

.main #maincolumn { 
    padding-bottom:0 !important; 
} 

.item-page { 
    padding-top:25px; 
} 

.contact h3 { 
    font-size:30px; 
    color:#144659; 
} 

img { 
    border:none; 
} 

p { 
    margin:8px 0; 
} 

em { 
    font-weight:700; 
} 

#all { 
    width:100%; 
    height:100%; 
    overflow:auto !important; 
    left:0; 
    top:0; 
    min-width:1080px; 
    margin:0 auto; 
} 

body,html { 
    overflow:auto !important; 
} 

.main .all_bg { 
    height:100%; 
    z-index:1300; 
} 

#header form .button { 
    font-weight:700; 
    cursor:pointer; 
    text-align:center; 
    text-transform:uppercase; 
    margin:0; 
} 

.main #header { 
    position:absolute; 
    top:50%; 
    margin-top:-61px; 
    left: -3px; 
} 

.main #head { 
    background:none; 
} 

/* LINE!!! */ 
#header { 
    width:100% !important; 
    height:150px; 
    text-align:left; 
    background-color:#FFF; 
    z-index:1300; 
    position:relative; 
    margin:0 auto 23px; 
    border: 1px solid #CCC; 
    filter:alpha(opacity=85); 
    opacity: 0.85; 
    -moz-opacity:0.85; 
} 

/* the center stuff */ 
#head { 
    height:150px; 
    text-align:left; 
    position:relative; 
    width:920px; 
    margin:0 auto; 
} 

#header > #head > .main_menu > ul.menu { 
    display:block; 
    text-align:left; 
    list-style-type:none; 
    position:absolute; 
    top:3px; 
    right:0; 
    z-index:1300; 
    padding:0; 
} 

#header .main_menu ul.menu > li { 
    list-style:none; 
    border:none; 
    float:left; 
    position:relative; 
    margin:0; 
    padding:0 0 0 1px; 
} 

#header .main_menu ul.menu > li:first-child { 
    background:none !important; 
} 

#header .main_menu a { 
position:relative; 
float:left; 
overflow:hidden; 
font-size:12px; 
text-transform:uppercase; 
text-decoration:none; 
color:#fff; 
width:109px; 
text-align:center; 
background:#0af; 
padding:40px 0 33px; 
} 

#header .main_menu a:hover,#header .main_menu ul.menu > li.actives > a,#header .main_menu ul.menu > li.current > a { 
background:#0a2034; 
} 

#header .main_menu ul.menu ul { 
display:none; 
top:91px; 
position:absolute; 
left:0; 
background:#0af; 
width:112px; 
padding:0; 
} 

#header .main_menu ul.menu ul ul { 
left:112px; 
top:0; 
background:#0af !important; 
padding:0; 
} 

#header .main_menu ul.menu ul li,#header .main_menu ul.menu ul ul li { 
display:block; 
height:30px; 
float:none !important; 
position:relative !important; 
line-height:30px; 
width:106px !important; 
border-bottom:1px solid #0ca4f1; 
} 

#header .main_menu ul.menu ul li.active,#header .main_menu ul.menu ul li:hover { 
background-position:0 0 !important; 
} 

.main #content { 
display:none; 
margin:0 auto; 
padding:0 0 17px; 
} 

#content { 
width:960px; 
position:relative; 
overflow:hidden; 
margin:0 auto 50px; 
} 

.clear { 
clear:both; 
display:block; 
overflow:hidden; 
visibility:hidden; 
width:0; 
height:0; 
} 

.clearfix:after { 
clear:both; 
content:' '; 
display:block; 
font-size:0; 
line-height:0; 
visibility:hidden; 
width:0; 
height:0; 
} 

.clearfix { 
display:block; 
} 

* html .clearfix { 
height:1%; 
} 

h1#logo { 
margin:0 !important; 
padding:0 !important; 
} 

#bg { 
position:fixed; 
z-index:1; 
overflow:hidden; 
} 

#bgimg { 
display:none; 
} 

#preloader { 
position:relative; 
z-index:1350; 
width:32px; 
top:50%; 
margin:-32px auto; 
} 

*,fieldset { 
margin:0; 
padding:0; 
} 

#header .main_menu ul.menu ul li a,#header .main_menu ul.menu ul ul li a { 
display:block; 
background:none; 
text-align:center; 
font-weight:400 !important; 
line-height:30px; 
height:30px; 
font-size:10px; 
width:112px !important; 
color:#fff; 
float:none !important; 
padding:0 !important; 
} 

#header .main_menu ul.menu ul li a:hover,#header ul.menu ul li.actives a,#header ul.menu ul li.current a,#header .main_menu ul.menu ul ul li a:hover { 
color:#fff; 
font-weight:400 !important; 
background:#0a2034; 
} 


button.GreyB { 
    background-color: #bfbfbe; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c6c6c6), color-stop(100%, #a7a7a7)); 
    background-image: -webkit-linear-gradient(top, #c8c8c8, #a6a6a6); 
    background-image: -moz-linear-gradient(top, #c8c8c8, #a6a6a6); 
    background-image: -ms-linear-gradient(top, #c8c8c8, #a6a6a6); 
    background-image: -o-linear-gradient(top, #c8c8c8, #a6a6a6); 
    background-image: linear-gradient(top, #c8c8c8, #a6a6a6); 
    border: 1px solid #a6a6a6; 
    border-bottom: 1px solid #969795; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -o-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: inset 0 1px 0 0 #cbcbcb; 
    -moz-box-shadow: inset 0 1px 0 0 #cbcbcb; 
    box-shadow: inset 0 1px 0 0 #cbcbcb; 
    color: #fff; 
    font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
    line-height: 1; 
    padding: 7px 0 8px 0; 
    text-align: center; 
    text-shadow: 0 -1px 0 #8b8b8a; 
    width: 100px; 
    height: 30px; 
    } 
    button.GreyB:hover { 
    background-color: #b4b5b4; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b4b4b3), color-stop(100%, #989998)); 
    background-image: -webkit-linear-gradient(top, #b3b3b3, #989898); 
    background-image: -moz-linear-gradient(top, #b3b3b3, #989898); 
    background-image: -ms-linear-gradient(top, #b3b3b3, #989898); 
    background-image: -o-linear-gradient(top, #b3b3b3, #989898); 
    background-image: linear-gradient(top, #b3b3b3, #989898); 
    -webkit-box-shadow: inset 0 1px 0 0 #c1c1c0; 
    -moz-box-shadow: inset 0 1px 0 0 #c1c1c0; 
    box-shadow: inset 0 1px 0 0 #c1c1c0; 
    cursor: pointer; } 
    button.GreyB:active { 
    border: 1px solid #979796; 
    border-bottom: 1px solid #898a88; 
    -webkit-box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee; 
    -moz-box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee; 
    box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee; } 

.textBox { 
    width: 200px; 
    height: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
    border: 1px solid #999; 
    position:absolute; 
    left: 1px; 
    top: 48px; 
    border: 3px solid #39a0c7; 
    border-radius:15px; 
    -moz-border-radius:15px; 
    box-shadow: 2px 5px 5px #1b627b; 
} 

.textBoxVin { 
    width: 110px; 
    height: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
    border: 1px solid #999; 
    position:absolute; 
    left: 90px; 
    top: 48px; 
    border: 3px solid #39a0c7; 
    border-radius:15px; 
    -moz-border-radius:15px; 
    box-shadow: 2px 5px 5px #1b627b; 
} 

/* label 1 (left) pic */ 

.imgLabelPost 
{ 
    float: left; 
    margin: 0px 0px 0px 0px; 
    position: absolute; 
    top: -25px; 
    z-index: 1500; 
} 

.imgLabelPost img, 
img.theLblButton 
{ 
    float: left; 
    background-color: #CCC; 
    border: 1px solid #666; 
    padding: 4px; 
    z-index: 1600; 
} 

.imgLabelPost .lblCaption 
{ 
    background: url('../img/banner.png') no-repeat left bottom; 
    bottom: 30px; 
    color: #fff; 
    left: -23px; 
    padding: 8px 10px 18px 13px; 
    position: absolute; 
    z-index: 1700; 
} 


/* label 2 (right) pic */ 

.imgLabelPost2 
{ 
    float: right; 
    margin: 0px 0px 0px 0px; 
    position: absolute; 
    top: -25px; 
    left: 230px; 
    z-index: 1500; 
} 

/* so that image still floats and looks nice even if JS is turned off */ 
.imgLabelPost2 img, 
img.theLblButton2 
{ 
    float: left; 
    background-color: #CCC; 
    border: 1px solid #666; 
    padding: 4px; 
    z-index: 1600; 
} 

.imgLabelPost2 .lblCaption2 
{ 
    background: url('../img/banner.png') no-repeat left bottom; 
    bottom: 30px; 
    color: #fff; 
    left: -23px; 
    padding: 8px 10px 18px 13px; 
    position: absolute; 
    z-index: 1700; 
} 

HTML 코드

<div id="header"> 
    <div id="head"> 
     <div class="logoheader"> 
      <h1 id="logo"> 
       <img src="img/cssMainLogo.png" alt="" height="99" width="389"> 
      </h1> 
     </div><!-- end logoheader --> 
     <div class="main_menu"> 
      <div class="logoheader2" align="center"><br> 
       <br> 
       <div id="theContent"> 
        <div class="imgLabelPost"> 
         <div id="printableDRV"> 
          <img src="aspPages/PFS.asp?PhotoId=31" title="DRV" class="theLblButton" height="210" width="210"> 
         </div> 
         <div class="lblCaption"> 
          <button class="GreyB" name="drvPrint" id="drvPrint"> 
           <span style="color: rgb(0, 0, 0); font-size:12px; font-family:Arial, Helvetica, sans-serif;">Print DRV Label</span> 
          </button> 
         </div> 
        </div> 
        <div class="imgLabelPost2"> 
         <div id="printablePAS"> 
          <img src="aspPages/PFS.asp?PhotoId=32" title="PAS" class="theLblButton2" height="210" width="210"> 
         </div> 
         <div class="lblCaption2"> 
          <button class="GreyB" name="pasPrint" id="pasPrint"> 
           <span style="color: rgb(0, 0, 0); font-size:12px; font-family:Arial, Helvetica, sans-serif;">Print PAS Label</span> 
          </button> 
         </div> 
        </div><!-- end imgLabelPost2--> 
       </div><!-- end theContent --> 
      </div><!-- end logoheader --> 
     </div><!--end main menu--> 
    </div><!--end head--> 
</div><!--end header--> 

도움이 될 것입니다!

데이비드

+0

일부 Z- 색인 문제가 발생합니다. 귀하의 CSS는 엉망입니다. 왜 모든 것이 절대적 위치를 차지합니까? 또한 요소를 먼저 뜨고 절대 위치를 지정하는 스타일이 있습니다. 의미가 없습니다 ... – elclanrs

+0

레이아웃이 무엇인지보기 위해 일부 html 코드를 볼 필요가 있습니다. – kolin

+0

@kolin : OP가 업데이트되었습니다. – StealthRT

답변

0

이 문제를 오는 몇 가지 가능성이 있습니다 :이의 컨테이너 어쩌면 당신의 컨테이너가 같은 몇 가지 필요한 정보가 누락) 오프 요소 overflow: auto;

이 절단

1) 확인은 " hasLayout "problem ... simpy이 컨테이너를주는 것으로 고칠 수있다. zoom: 1;

3) 컨테이너의 높이 (여백, 패딩 또는 높이)와 overflo w : 숨김; 숨겨진 오버플로를 꺼내야합니다. 위치 촬영

+0

"컨테이너"란 무엇입니까? – StealthRT

+0

#header가 전체 컨테이너 인 것 같고 #head가 뒤 따르는 것 같습니다 – kolin

0

: #head와는 #header 중 상대는 '해결'할 것 같다 당신의

/* LINE!!! */ 
#header { 

과 최대한 멀리 볼 수

/* the center stuff */ 
#head { 

.

가능하게 할 수있는 가장 좋은 방법은 IE 버전 개인적인 관점에서

<!--[if IE 8]> 
    <link type="text/css" rel="stylesheet" media="all" href="ie8.css" /> 
<![endif]--> 

처리하는 코드에 IE 조건부 스타일 시트를 추가하는 것입니다의 HTML과 CSS 혼란 보이는, 내가 개인적으로 다시 작성 것이다 html/css 같은 일을 할 수 있지만 코드가 적습니다.

+0

두 가지 변경 사항을 만들었고 모든 변경 사항은 모든 항목을 왼쪽으로 옮겼습니다. 아직도 사각형을 잘랐다. – StealthRT

0

IE8에는 너비와 높이에 몇 가지 문제가 있으므로 % y로 시도하십시오. IE8에 특정 스타일을 사용하십시오.

<!--[if lt IE 9]> 

    <style> 
     #image_id{ 
       min-height:(some value in px); 
       min-width:(some value in px); 
       zoom:0.8;(some value less than 1 to make the image fit) 
      } 
    </style> 

<![endif]--> 
관련 문제