IE9中的CSS位置看起来不错，在IE8中被切断了

时间：2012-03-07 08:42:06

标签： css html layer

嘿所有我希望有人可以告诉我我需要更改的内容，以便在IE9中查看我目前在IE9中看到的内容是相同的。

这就是它在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 个答案:

答案 0 :(得分：0)

这个问题有可能出现：

1）使你的容器切断元素overflow: auto;

2）也许你的容器缺少一些必要的信息，比如“hasLayout”问题......通过给这个容器zoom: 1;

简单地修复它

3）你的容器有一个固定的高度（例如边缘，填充或高度）和溢出：隐藏;你应该取出隐藏的溢出物。

答案 1 :(得分：0)

采取立场：#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以使它做同样的事情，但代码更少。

答案 2 :(得分：0)

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]-->
相关问题
最新问题