Question

在IE 7中，我的div向右移动太多了，而他们在谷歌浏览器中表现正常。起初我认为这是z指数，但后来解决的是位置：绝对有没有人遇到过修复，我将不胜感激！

截图：

chrome

这是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重置，如下面的链接，或者至少尝试将它放在主css样式表的顶部：

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

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

CSS Reset

修改

不要使用表格（永远 - 尤其是菜单）

没有理由设置溢出：可见;那是默认的

尽量不要将所有东西设置为浮动 - 例如 - 是否需要浮动幻灯片？如果你只能使用浮动的列来逃避，你会更好，并希望能更清楚问题是什么。

总体问题导致IE7吓坏了：不确定。将您的页面剥离到最低 - 2列。让CSS使用JUST那些2，尽可能少使用CSS来做到这一点。然后，当你在IE7中工作时，你可以慢慢添加像图像，然后菜单......等等。每次添加后检查是否有任何问题。

抱歉，我无法提供更多帮助，但是 - 这就是做到这一点的方法。如果你将它完全剥离，并且仍然无法正常工作，请发送一个指向该jsfiddle的链接。

Answer 2

有些代码没有意义。

您对div的绝对定位似乎没有顶部，底部，左侧或右侧的值。如果您没有自己设置，绝对将使用默认值valeus。
您的div的z-index值与彼此不在同一级别。
div，rightinfohomecontainer比它包含的一些diovs窄。这是故意的吗？

进行调试，尝试使用：

#rightinfohomecontainer,
#rightinfohomecontainer div{
border: 1px solid blue;
}

这可能会告诉你哪个div正在推动事情，需要注意。

Answer 3

您提供的CSS无效，缺少一些}。看看你原来的CSS是否也没有它们。

您在绝对中声明了一些div，但您也将它们设为 float 。我认为这是一个坏主意。

您声明了一些div宽度+ margin + padding。它可能是issue。

最后，试试这个：

#rightinfohomecontainer {
    height: 300px;
    width: 400px;
    margin-top:160px;
        float: left;
    z-index: 3;
    overflow: hidden;
    position: relative;
    border:2px solid gray;
    background:#ddd;
}
#rightinfoboxhome {
    height: 100px;
    width: 400px;
    z-index: 2;
    overflow: visible;
    position: absolute;
    margin-left: 0px;
    border:2px solid blue;
    background:lightblue;
}

#rightinfoboxtext {
    height: 245px;
    width:100%;
    z-index: 1;
    margin-top: 60px;
    padding-left: 50px;
    overflow: hidden;
    padding-right: 6px;
    padding-top: 2px;
    margin-left: 0px;
    position: absolute;
    border:2px dotted green;
    background:lightgreen;
}

#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
    border:2px solid red;
    background:#cc55cc;
}

我删除了一些样式，更改了1 div宽度（达到100％）并添加了一些代码以在我的浏览器中进行测试（即边框和背景（对于z-index问题））。

您应该首先重新考虑使用CSS设置样式，可能还有其他部分可以移除（例如#rightinfoboxhome margin-left）。

IE 7 DIV向右移动

3 个答案: