100% 宽度的 div 在 IE 中无法正确显示答案

【问题标题】：100% width div doesn't display correctly in IE100% 宽度的 div 在 IE 中无法正确显示
【发布时间】：2010-07-08 13:47:58
【问题描述】：

我想，我有一个不寻常的问题。好吧，我有一个以绝对位置开头的 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

有什么问题？

【问题讨论】：

标签： css internet-explorer

【解决方案1】：

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

你的 DOCTYPE 正确吗？

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

【讨论】：

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> w3.org/1999/xhtml">
是的，没关系。补充一下，如果省略了 DOCTYPE 或者您在 DOCTYPE 上方有内容（甚至是空白区域），那么 IE 可能会以 quirksmode 呈现文档，这可能会导致您的网站显示不正确。

【解决方案2】：

您的绝对定位 div 似乎缺少一些信息：

top: 0;
left: 0;

【讨论】：

【解决方案3】：

在 IE 中，100% 的宽度将使用它的父宽度，所以你需要把它放在 container_out 里面，改变你的 container_out css，也许添加 padding-top/margin-top = header_warp 高度

【讨论】：

我想到了，但在页面的右下角我有身体背景女巫是设计的一部分。

【解决方案4】：

我刚刚在 Vista 上的 IE8 中测试了它，它显示正常。

看起来 div 所做的只是显示页面的背景图像。为什么不直接将背景图片添加到 body 并去掉那个 div？

【讨论】：

我想到了，但在页面的右下角我有身体背景女巫是设计的一部分。