IE 7 DIV右移

Question

在IE 7中我div的转移太多的权利，而他们在谷歌浏览器的行为正确。起初，我认为这是Z指数，但后来制定出的立场是：绝对 有没有人遇到过修复，这将是非常感谢！

截图：

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复位像下面的链接，或者至少尝试把这个在你的主要CSS样式表的顶部：

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

这将启动所有的浏览器默认0所有元素的边距和0填充 - 因为有些浏览器拥有自己的头脑，并且认为当你真的不需要时可以使用填充/边距。

CSS Reset

---

编辑：

• 不要使用表格（不断 - 但尤其是对你的菜单）
• 没有理由设置溢出：可见;这是默认的
• 尽量不要设置绝对一切浮法 - 例如 - 是否幻灯片需要浮动？如果只能浮出柱子，你会变得更好，并希望能更清楚地知道问题所在。

总体问题导致IE7吓坏了：老实说不太确定。将您的页面剥离至最低 - 2列。获取CSS只与那些2一起工作，使用尽可能小的CSS来做到这一点。然后，当你在IE7中也可以使用它时，你可以慢慢添加像图片，然后菜单等等等等。每次添加后检查是否有任何事情搞砸了。

对不起，我不能更多的帮助，但 - 这是做到这一点的方式。如果你把它完全剥离下来，但它仍然不起作用，请发送一个链接到那个jsfiddle。

Answer 2

一些这个代码是没有意义的。

1. 您对div的绝对定位不会出现顶部，底部，左侧或右侧的值。如果你没有自己设置这些，绝对值将使用默认值来表示顶部和左侧。

2. 您有不同于彼此级别的div的z-index值。

3. div，rightinfohomecontainer比它包含的一些diovs更窄。这是故意的吗？

调试，尝试使用：

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

这可能会告诉你它的div围绕推动的事情，需要注意。

Answer 3

您提供的CSS无效，它缺少一些}。看看你的原始CSS也缺乏它们。

您声明一些格在绝对但你也让他们漂浮。我认为这是一个坏主意。

你声明一些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条格宽度（100％），并增加了一些代码在我的浏览器（即，边框和背景（Z-Index的测试问题））。

您应该重新思考如何使用CSS进行样式化，可能还有其他部分可以移除（例如，#rightinfoboxhome margin-left）。