堆棧內存溢出
  簡體   English   中英

在IE9中CSS位置看起來不錯，而在IE8中卻截然不同

[英]CSS postion looks good in IE9, cut off in IE8

 原文  2012-03-07 08:42:05  4   3    css/ html/ layer

問題描述

嘿，我希望有人能告訴我我需要更改什么才能使我在IE9中看到的內容與在IE8中看到的相同。

這是IE9中的樣子：

這就是IE8中的樣子：

這兩個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-->

任何幫助將是巨大的！

大衛

3 個解決方案

解決方案1
 0  2015-10-28 14:41:01

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]-->

解決方案2
 0  2012-03-07 14:48:50

有一些可能出現此問題：

1）使您的容器中的這個截止元素overflow: auto;

2）也許您的容器缺少一些必需的信息，例如“ hasLayout”問題...通過將此容器zoom: 1;簡化修復zoom: 1;

3）您的容器具有固定的高度（例如，按邊距，填充或高度），並且溢出：隱藏； 您應該將隱藏的溢出清除掉。

解決方案3
 0  2012-03-08 09:43:22

擔任職務：#head和#header相對而言似乎“修復”了您的 

/* LINE!!! */
#header {

和 

/* the center stuff */
#head {

據我所知。

最好的辦法是在代碼中添加IE條件樣式表以處理IE版本 

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

從個人的角度來看，html和css看起來令人困惑，我個人將考慮重寫html / css以使其執行相同的操作，但是使用更少的代碼。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS網站在IE8和FF中看起來不錯，但在Google Chrome中卻不好 網站在IE9中看起來不錯，但在Firefox，IE8和IE7中看不到 CSS位置錯誤IE8 / IE9 IE8上的css樣式表，IE9 IE8 / IE9不加載CSS ie8和ie9上的CSS徑向漸變 IE8 + IE9 HTML和CSS焦點 IE8問題-在其他瀏覽器上看起來不錯 外部CSS樣式表在ie8中看起來有所不同 CSS在FF和Chrome中看起來不錯，但在IE8中卻不然
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM