在ie7中div絕對位置的問題，div向右移動10px

我的位置在IE7上的絕對屬性有問題。我的div向右移動10px。以下是我的代碼。 IE8和9工作正常。 id菜單是我提到的div。在ie7中div絕對位置的問題，div向右移動10px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body{margin: 0 0 0 0; padding: 0 0 0 0;} 
#holder{width: 400px; height: 500px; margin: 0 auto;} 
#left{float: left; width: 50px; height: 500px; background-color: red;} 
#center{float: left; width: 300px; height: 500px; background-color: green;} 
#right{float: left; width: 50px; height: 500px; background-color: red;} 
#header{width: 300px; height: 70px; background-color: yellow;} 
#gal-holder{width: 280px; height: 70px; margin: 0 auto;} 
#gallery{width: 280px; height: 410px; background-color: orange;} 
#button{width: 400px; height: 45px; background-color: red; margin: 0 auto;} 
#menu{width: 300px; height: 45px; background-color: pink; position: absolute; z-index: 1000; top: 100px;} 
#content{width: 380px; height: 200px; margin: 0 auto; background-color: blue; padding: 10px; color: #fff;} 
#clear{height: 10px;} 
</style> 
</head> 
<body> 
<div id="holder"> 
    <div id="left"></div> 
    <div id="center"> 
     <div id="header"></div> 
     <div id="menu"></div> 
     <div id="gal-holder"> 
      <div id="clear"></div> 
      <div id="gallery"></div> 
      <div id="clear"></div> 
     </div> 
    </div> 
    <div id="right"></div> 
</div> 
<div id="button"></div> 
<div id="content">Sample text</div> 
</body> 
</html>

來源

2011-02-24 andsien

Whichg div？很難分辨:) – Kyle 2011-02-24 06:08:19

與一個ID菜單.. – andsien 2011-02-24 06:18:14

添加position:relative到#center然後left:0px到#menu。

絕對定位的元素相對於它們最接近的定位父親進行定位。最好給出想要定位左/右和上/下座標的項目，以防止發現奇怪的結果。

來源

2011-02-24 06:25:11 Galen

@ Galen ..非常感謝你galen。現在我可以繼續前進。可悲的是我不能投票你的答案因爲我仍然有11個聲望。再次感謝。 – andsien 2011-02-24 06:31:00

@畝太短...謝謝，已經做到了，你也是。謝謝你的時間。 – andsien 2011-02-24 06:38:04

@mu太短..所以我只能選擇一個答案。對不起，我的無知。 =） – andsien 2011-02-24 06:40:36

您應同時指定頂部和左側位置，並添加position:relative到直接父：

#center { 
    float: left; 
    width: 300px; 
    height: 500px; 
    background-color: green; 
    position:relative; 
} 
#menu { 
    width: 300px; 
    height: 45px; 
    background-color: pink; 
    position: absolute; 
    z-index: 1000; 
    top: 100px; 
    left: 0; 
}

而且一個活生生的例子：http://jsfiddle.net/ambiguous/vRJMd/

默認left爲auto，並且或多或少意味着瀏覽器可以做任何它認爲合理的事情。此外，絕對定位的元素相對於最近的祖先的位置不是static（這可能是您的案例中的<body>）。

來源

2011-02-24 06:31:58

。謝謝，你們蓋倫都解決了我的問題。我道歉我不能回答你的回答，因爲我仍然有11個聲望。再次感謝。 – andsien 2011-02-24 06:36:40

在ie7中div絕對位置的問題，div向右移動10px

回答

相關問題