Question

在旧版IE中遇到问题。我在三个浮动的div上面有三个左浮动的div，两个都是单独的包装器。在旧版本的IE中，较低的div与较高的div重叠。 Safari，移动版和firefox都很好。

请帮忙。

我的代码：

#header {
z-index: 1000;
background-image: 
background-repeat: repeat-x;
height: 39px;
margin-right: auto;
margin-left: auto;
}

#wrapper {
background-position: center bottom;
background-repeat: no-repeat;
width: 980px;
margin-right: auto;
margin-left: auto;
height: 650px;
}

#headwrapper {
margin-right: auto;
margin-left: auto;
height: 39px;
width: 900px;
background-position: left;
background-repeat: no-repeat;
}

#slidercontainer {
padding-top: 20px;
float: right;
background-repeat: repeat;
background-image: 
padding-right: 50px;
height: 280px;
width: 750px;
background-color: black;
}

#botwinleft {
padding-left: 20px;
padding-top: 30px;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
float: left;
height: 335px;
width: 410px;
}

#botwinleft h3 {

text-shadow: 3px 3px #e1e1e1;

color: #da1922;

}

#botwincenter {
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
height: 365px;
float: left;
width: 95px;
}

#botwinright {
padding-top: 50px;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
background-repeat: no-repeat;
height: 315px;
float: left;
width: 445px;
}

body {
background-image: 
background-color: black;
background-repeat: repeat;
padding: 0px;
margin: 0px;
}

#left {
background-image: 
background-repeat: repeat;
padding-right: 20px;
padding-left: 40px;
border-style: none;
height: 250px;
float: left;
width: 239px;
}

#left img {
padding-right: 15px;

}

#center {
background-image: 
background-repeat: repeat;
padding-right: 20px;
padding-left: 20px;
border-style: none;
height: 250px;
float: left;
width: 260px;
}


#center img {
padding-right: 15px;
}


#right {
background-image: 
background-repeat: repeat;
border-style: none;
height: 250px;
float: left;
width: 375px;
}


#right img {
padding-right: 15px;
}


#footer {
border-top-style: groove;
border-top-color: #4c4c4c;
border-top-width: 2px;
background-image: 
background-repeat: repeat;
clear: both;
height: 150px;
margin-right: auto;
margin-left: auto;
}

#nav {
background-image: 
background-repeat: repeat-y;
height: 300px;
float: left;
width: 150px;
}

#menu {
padding: 0px;
margin: 0px;
width: 0px;
}

#menu li {
list-style-type: none;
margin:0 0 0.25em 0;
}

#menu a, #menu a:visited {
background-color: #4c4c4c;
display:block;
width:9em;
text-align: center;
text-decoration:none;
color:#eee;
}

#menu a:hover {
background: #ddd;
color: red;
}
#leftfloat {
border-left-style: none;
border-bottom-style: groove;
border-right-style: none;
border-top-style: none;
border-bottom-color: #595959;
border-bottom-width: 3px;
background-image: 
background-repeat: repeat;
height: 300px;
background-color: #858585;
margin-left: auto;
}
#bottomwrap {
background-position: 0 bottom;
background-image: 
background-repeat: no-repeat;
height: 700px;
margin-right: auto;
margin-left: auto;
width: 980px;
}
#lowerbackground {
border-top-style: none;
background-image: 
background-position: 0 bottom;
background-repeat: repeat-x;
height: 700px;
margin-right: auto;
margin-left: auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
</head>
<body>
<div id="header">
<div id="headwrapper"></div>
</div>
<div id="leftfloat">
<div id="wrapper">
<div id="nav">
menu here


</div>
<div id="slidercontainer">
<div id="slider">
<ul>
images here
</ul>
</div>

</div>
<div id="botwinleft">
<h3>Welcome to S & L Motors</h3>
<p>text here</p></div>
<div id="botwincenter"></div>
<div id="botwinright"><iframe width="325" height="250" frameborder="0" >View Larger Map</a></small></div>
</div>
</div>
<div id="lowerbackground">
<div id="bottomwrap">
<div id="left">
<h3 align="center">Great Service</h3>

<p>text here
</p>
</div>
<div id="center">
<h3 align="center">Weekend Work</h3>

<p>text here.</p>
</div>
<div id="right">
<h3 align="center">Expert Staff</h3>

<p>texte.</p>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

编辑：

好的非常感谢有关dup帖的建议和抱歉。我尝试了所有这些建议以及xml1过渡doctype和html 4.01过渡，没有任何工作???

Answer 1

由于你有两个相同的问题，我会回答两个问题。其中一个将被关闭。

嗯，这里有一些要看的东西：

#header {
z-index: 1000;
background-image:   /* This might be screwing up IE */
background-repeat: repeat-x;
height: 39px;
margin-right: auto;
margin-left: auto;
}

您的代码非常重复。我会将重复的样式声明组合在一起，使其更具可读性（并节省空间）：

#header, #wrapper, #headwrapper {
margin-right: auto;
margin-left: auto;
}

此代码可以压缩：

border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;

进入border-style: none;。我不知道除了顶部，底部，左侧，右侧之外的任何其他方向，所以您不妨立刻将它应用于所有这些方向。

至于重叠的问题，我会这样做。告诉我它是否有效（我不是IE专家。我真的不在乎）：

#wrapper1, #wrapper2
{
  overflow: auto; /* This stops the floated elements from "deflating" the parent. Remove it and you'll see. */
  display: block;
}

祝你好运！

Answer 2

您可以尝试添加：

_clear: both

在你的下层包装器上，这只会在IE6中呈现。

IE中的CSS Float Drop？

2 个答案: