css - IE 7 DIV 右移

Question

在 IE 7 中，我的 div 向右移动太多，而它们在 Google Chrome 中的行为是正确的。起初我以为是 z-index 但后来发现是 position:absolute有没有人遇到过修复，将不胜感激!

截图:

IE7 http://i56.tinypic.com/2vjsqwz.png

这是 CSS:

#rightinfohomecontainer {
height: 300px;
width: 400px;
margin-top:160px;
    float: left;
z-index: 3;
overflow: hidden;
position: relative;

#rightinfoboxhome {
float: left;
height: 100px;
width: 400px;
z-index: 2;
overflow: visible;
position: absolute;
margin-left: 0px;

#rightinfoboxtext {

float: left;
height: 245px;
width: 344px;
z-index: 1;
margin-top: 60px;
padding-left: 50px;
overflow: hidden;
padding-right: 6px;
padding-top: 2px;
margin-left: 0px;
position: absolute;
}
#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
}

HTML

<div id="rightcolumn">
<div id="rightinfohomecontainer">
<div id="rightinfoboxhome"><img src="images/aboutus.png" /> </div>
<div id="rightinfoboxtext"></div>
</div></div>

Answer 1

在没有看到实际页面的情况下，诊断起来会非常困难。这可能与左图的 CSS 有关，但这不包括在您的问题中。您的绝对位置基本上毫无意义，因为该 div 无论如何都已经位于其父级的 0px 0px 处。

我猜这不是 IE7 问题，而是整体不正确/错误的 CSS 问题。创建 jsfiddle ，我可以进一步研究它。

对于初学者，您可能应该像下面的链接那样尝试使用 CSS Reset，或者至少尝试将它放在主 css 样式表的顶部:

* {
    margin: 0px;
    padding: 0px;
}

这将以所有元素的默认 0 边距和 0 填充启动所有浏览器 - 因为某些浏览器有自己的想法，并认为您需要填充/边距，而实际上您不需要。

CSS Reset

---

编辑:

• 不要使用表格(永远不要——但尤其是在你的菜单上)
• 没有理由设置溢出:可见；这是默认值
• 尽量不要将所有内容都设置为 float - 例如 - 幻灯片是否需要 float ？如果您可以只让列 float ，那么您的情况会更好，并且有望更清楚问题所在。

导致 IE7 崩溃的总体问题:老实说，我不确定。将您的页面精简到最低限度 - 2 列。让 CSS 只与这两个一起工作，使用尽可能少的 CSS 来做到这一点。然后，当您也让它在 IE7 中运行时，您可以慢慢添加图像、菜单等内容。每次添加后检查是否有任何问题。

抱歉，我帮不上什么忙，但是 - 就是这样。如果您将其完全删除，但仍然无法正常工作，请发送指向该 jsfiddle 的链接。