CSS9の姿勢がIE9でうまく見える

Question

私はIE8で見たときにIE9で現在見ているものを得るために何かを変える必要があると誰かに教えてくれることを願っています。

これは、それがIE9で次のようになります。

そして、これは、それがIE8で次のようになります。

これら2 DIVSための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--> 

助けがあれば助かります！

デビッド

Answer 1

この問題を考え出すいくつかの可能性があります。

1）は、このあなたのコンテナが要素overflow: auto;

2をカットします）多分あなたの容器」のようないくつかの必要な情報が欠落hasLayout "problem ... simpyこのコンテナを与えることで修正してください。zoom: 1;

3）コンテナの高さが固定されています（マージン、パディング、高さなど）。オーバーフローw：隠れた;隠されたオーバーフローを取り除くべきです。

Answer 2

ポジションを取る：#headと＃ヘッダーのうち相対は、私の知る限り、あなたの

/* 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は同じことをするが、コードは少ない。

Answer 3

IE8には幅と高さに問題がありますので、これを試してみてください： 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]-->