Question

我有2个包装器，一个在另一个里面，按照下面的html。第一个包装器包含向下滚动的图块。包装2的图像为940 X295px。在IE5和IE中工作得很漂亮IE8，但在IE7中，页脚跳到包装器2，文本在下方和下方向下延伸。

这是我的HTML：

<div id="wrapper">
<div id="header"></div>
<div id="wrapper2">
<div id="maincontent"></div>
<div id="navigation"></div>
</div>
<div id="footer"></div>
</div>

我已经把结束的div移到了无处不在的地方。

我对上述div的css是：

body {
 margin-top: 0px;
 padding-top: 0px;
 background-image: url(../images/body_vert_tile.gif);
 background-color: #C8BE86;
 background-repeat: repeat-x;
}
#wrapper {
 background-attachment: scroll;
 background-image: url(../images/wrapper_horiz_tile.gif);
 background-repeat: repeat-y;
 margin-right: auto;
 margin-left: auto;
 width: 940px;
}
#wrapper2 {
 background-image: url(../images/wrapper_2.jpg);
 height: 295px;
 margin-right: auto;
 margin-left: auto;
 background-position: left top;
}
#header {
 width: 940px;
 background-image: url(../images/header.jpg);
 height: 345px;
 margin-right: auto;
 margin-left: auto;
}
#maincontent {
 float: right;
 width: 630px;
 padding-right: 70px;
 padding-left: 10px;
 margin-top: -10px;
}
#maincontent_home {
 float: right;
 width: 420px;
 padding-right: 10px;
 padding-left: 10px;
 margin-top: -10px;
}
#secondary_content {
 float: right;
 width: 190px;
 padding-right: 70px;
 margin-top: 30px;
 padding-left: 20px;
}
#footer {
 background-repeat: no-repeat;
 background-position: left bottom;
 width: 940px;
 text-align: center;
 clear: right;
 background-image: url(../images/footer.jpg);
 height: 145px;
 margin-right: auto;
 margin-left: auto;
#navigation {
 float: right;
 width: 130px;
 padding-right: 10px;
 padding-bottom: 10px;
 background-repeat: repeat-y;
 background-position: right top;
 padding-top: 5px;
}

我把头发拉了出来。我应该忽略IE7吗？我真的很想克服这一点。我找到的唯一方法就是让封面2位于标题下方并在主要内容之前关闭。然后我在内容的顶部设置-ve margin，并导航与wrapper2中图像的高度相同的大小。它有效，但我不知道我是否应该做这样的事情。

非常感谢您的帮助。

Answer 1

如果你能提供一个检查这种行为的URL会很棒，但我会添加一个：

<div style="clear:both;">&nbsp;</div>

关闭导航DIV后

顺便说一下，我你没有使用任何CSS重置，你应该。我使用蓝图，但有很多。

Answer 2

Alejandro建议我删除Wrapper 2的高度并添加：background repeat：no repeat;

当我这样做时，图像消失了，但是当我将height属性更改为min：height：295px;它工作得很漂亮。谢谢你亚历杭德罗指出我正确的方向

IE 7显示2个包装器的问题

2 个答案: