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）。