Question

相关网页位于：http://supportdogs.digitalportals.net/PhotoGallery/16-Events

您可以在IE8中看到内容正在侧栏下推。如果您在IE8兼容模式下查看它，它不会发生，也不会在Firefox中发生。如果您浏览到IE8中的其他页面，则问题不会持续存在。

基本布局是

<div class="contentContainer">
     <div class="left"></div>
     <div class="right"></div>
</div>

这三个班级的CSS就在这里

#contentContainer {
 background: transparent url('../images/bodyBG.png') repeat-y center top;
 clear: both;
 padding: 0px 30px 0px 30px;
 margin-top: 83px;
 width: 935px;
}

#contentContainer .left {
 float: left;
 margin-top: 60px;
 padding-left: 5px;
 width: 195px;
}

#contentContainer .right {
 float: right;
 margin: -55px 0px 20px 0px;
 min-height: 620px;
 width: 700px;
}

任何人都知道造成这种情况的原因是什么？

Answer 1

你有一个（PayPal）表单嵌套在另一个（aspnetForm）表单中;这是无效的HTML。 IE8正在解析页面，好像内部＆lt; / form＆gt; tag关闭了外部窗体，导致布局中断。

在IE8中，您可以打开开发人员工具（工具＆gt;开发人员工具），打开类似于解析页面的类似Firebug的视图。

Answer 2

我认为这与利润率有关。请尝试使用填充。

Answer 3

我猜这个问题很清楚：你们都在#contentContainer上。每当你“清除：两者”某事时，它应该在同一行上的所有浮动内容之后掉落。我认为它扮演一个小马车的原因是因为你的浮动DIV是#contentContainer的孩子（不在同一条线上）。

如果你担心#contentContainer的高度没有扩展，你应该在你的浮动元素之后放置另一个元素clear：both，或者你可以查看这篇文章：http://www.webtoolkit.info/css-clearfix.html

Answer 4

虽然这不是一个解决方案，但你可以将这段代码放在头脑中，使IE8像IE7一样。

＆LT; meta http-equiv =“X-UA-Compatible”content =“IE = EmulateIE7”/＆gt;

浮动在IE8中被推下而不是IE7或Firefox

4 个答案: