2013-03-13 44 views
0

我有一個網站,通過加入body標籤的bg和div標籤的bgs來完成佈局。但是,根據您使用的瀏覽器和操作系統,由於滾動條的原因,它們看起來並不準確。 (我已通過添加溢出測試:隱藏;對身體元素和一切完美匹配)Div bg與Body bg不匹配

有沒有解決這個問題的方法?

的差距是小本:

<body> 
<div id="content"> 
<div id="contentL> 
... 
</div> 
<div id="contentR"> 
... 
</div> 
<div style="clear:both;"></div> 
</div> 
</body> 

body{ background:url('bg.jpg') top center no-repeat #000; } 
#content{ width:980px; margin:0 auto; } 
#contentL{ width:220px; padding:20px; float:left; background:url('left.jpg'); } 
#contentR{ width:680px; padding:20px; float:right; background:url('right.jpg'); } 

感謝

+0

嗨,你能更具體地瞭解你的問題嗎? – jhunlio 2013-03-13 06:14:55

+0

您的HTML有效嗎?如果沒有,您可能會在瀏覽器中觸發怪異模式,從而獲得意想不到的結果。除此之外,所提供的代碼和圖像並沒有那麼有用,而是提供了一個[demo](http://jsfiddle.net)你的問題。 – Zeta 2013-03-13 06:39:47

回答

0

我想你的意思是說你要在兩個內部內容之間div■當一個缺口使用IE。如果是這樣,這是由於IE和其他瀏覽器之間的盒子模型不同 - IE在你的寬度內包含你的填充,而其他瀏覽器將它添加到寬度外。

所以你的修復是刪除填充。但是,也許你仍然需要在這些div的內容之間進行一些分離。爲此,您可以在您的內容中添加另一個div,然後在它們上填充內容 - 請勿在這些內部的div s上放置特定寬度,因爲那樣您就會遇到同樣的問題,但只要確保它們是顯示模塊即可是他們將如何在所有瀏覽器中以寬度填充可用寬度。

這就是我的做法,但可能會有更好的方式,包括特定的樣式表和盒子模型黑客 - 只是谷歌框信息模型和處理IE瀏覽器。