100％寬度div在IE中無法正確顯示

嗯，我認爲，這是一個不尋常的問題。那麼我有一個網頁與絕對位置開始div。100％寬度div在IE中無法正確顯示

.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。但我的同事是與IE8的Windows VISTA和看看結果是什麼 alt text http://www.pechat.mdkbg.com/problem.jpg

什麼問題？

在IE

來源

2010-07-08 Victor

，100％的寬度將利用其母公司的寬度，所以你需要把它裏面container_out，改變你的container_out CSS，也許添加填充頂/邊距= header_warp高度

來源

2010-07-08 13:56:59 Puaka

我想到了這一點，但在頁面右下角的我的身體的背景女巫是設計的一部分。 – Victor 2010-07-09 08:46:19

我只是測試它在Vista上的IE8和它顯示正常。

它看起來像所有div正在做的是顯示頁面的背景圖像。爲什麼不只是將背景圖片添加到body並擺脫該div？

來源

2010-07-08 14:19:30 Yisroel

我想到了，但在頁面的右下方，我有身體背景的女巫是設計的一部分。 – Victor 2010-07-09 09:24:46

@Puaka我認爲所有瀏覽器在指定百分比寬度時都與父容器有關。在這種情況下，它應該是相對於身體。

您的DOCTYPE是否正確？

如果你絕對定位一個元素，你應該指定你沒有看到的頂部/左側位置。此外，您指定margin:0 auto;意味着可能存在左/右邊距。我原以爲這應該只是margin:0;？

來源

2010-07-08 14:22:17 MrWhite

<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> – Victor 2010-07-09 09:23:30

是的，沒關係。只需添加，如果DOCTYPE被省略或者DOCTYPE上方有內容（甚至是空白空間），那麼IE可能會將文檔渲染爲quirksmode，從而導致您的網站顯示不正確。 – MrWhite 2010-07-09 15:51:00

看起來像您遺漏了您的絕對定位div一些信息：

top: 0; 
left: 0;

來源

2010-07-08 14:30:34 derekerdmann

100％寬度div在IE中無法正確顯示

回答

相關問題