Question

我认为，我有一个不寻常的问题。好吧，我有一个带有绝对位置的起始div的网页。

.head_warp
{
 width:100%;
 display:block;
 height:238px;
 margin:0 auto;
 padding:0;
 position:absolute;
 text-align:center;
 background-image:url(images/demo6_fon.png);
 background-position:center;
 background-position:top;
 background-repeat:repeat-x;
 z-index:-9999;
}

之后我有一个容器

#container_out
{
 width:1024px;
 margin:0 auto;
}

HTML就是这样：

<div class="head_warp"></div>
<div id="container_out"></div>

想法是“容器”中的内容显示在“head_warp”上，并且在我测试过的任何浏览器中都可以。 Chrome，FF，Safari甚至还有IE8和IE7。但是我的同事使用的是带有Windows VISTA的IE8，看看结果如何 alt text http://www.pechat.mdkbg.com/problem.jpg

有什么问题？

Answer 1

@Puaka我认为在指定百分比宽度时，所有浏览器都与父容器相关。在这种情况下，它应该相对于身体。

您的DOCTYPE是否正确？

如果你绝对定位一个元素，你应该指定你似乎没有做的顶部/左侧位置。此外，您指定margin:0 auto;暗示可能存在左/右边距。我原以为这应该只是margin:0;？

Answer 2

您似乎错过了绝对定位div的一些信息：

top: 0;
left: 0;

Answer 3

在IE中，100％宽度将使用其父宽度，因此您需要将其放在container_out中，更改您的container_out css，可能添加padding-top / margin-top = header_warp height

Answer 4

我刚刚在Vista上的IE8中进行了测试，显示效果很好。

看起来div正在做的就是显示页面的背景图像。为什么不将背景图像添加到body并删除该div？

在IE中，100％宽度div无法正确显示

4 个答案: