IE背景顯示問題

Question

我正在爲我的教會創建一個網站，我遇到了問題，使它在IE中顯示正確。看來我的div「sidebox」的背景位置被「margin：0 auto」覆蓋了。因爲背景顯示居中，而不是右側，這正在向右移動站點。

下面的代碼：

.sidebox { 
margin: 0 auto; 
background-image: url(images/bg-container-right.jpg); 
background-repeat: no-repeat; 
background-position: bottom right !important; 
position: absolute; 
left: 0px; 
width: 960px; 

}

.boxhead { 
    background-image: url(images/bg-container-top.jpg); 
    background-repeat: no-repeat; 
    background-position: top right; 
    height: 37px; 
} 

.boxbody { 
    background-image: url(images/bg-container-left.jpg); 
    background-repeat: no-repeat; 
    background-position: bottom left !important; 
    width: 25px !important; 
} 

.boxtopcorner { 
    background-image: url(images/bg-container-top-right.jpg); 
    background-repeat: no-repeat; 
    background-position: top left; 
    width: 25px; 
    height: 37px; 
} 

<div class='sidebox' style='border: 1px solid;'> 
I'm in the box 
    <div class='boxhead'> 
     <div class='boxtopcorner'></div> 
    </div> 
    <div class='boxbody' style='height: 750px;'> 
     <!-- Content Goes Here --> 
    </div> 
</div> 

下面是正在運行的網站的鏈接。你可以看到它在FF和Safari中運行正常，但不在IE中運行。我上面的代碼沒有內容，刪除它不能解決問題。 Running page

Answer 1

通過IE開發人員工具欄查看它，它會給出.sidebox中心的對齊。將它改爲左邊似乎可以解決它。

.sidebox { 
    ... 
    text-align: left; 
} 

Answer 2

我會採取一種完全不同的方法來分割背景圖像。

1. 爲帶圓角的陰影創建頂部和底部圖像。使用這些作爲頂部和底部的背景（如果這已經不明顯）。
2. 爲雙方的陰影創建一個「長」高1像素的圖像。將此用於該頁面的整個內容區域的背景。
3. 儘量不要使用絕對定位。可以使用浮動創建相同的佈局。例如：

.container {寬度：960像素;保證金：0汽車; }

.header { width: 960px; height: 20px; background: url(top.jpg) no-repeat; } 

.footer { width: 960px; height: 20px; background: url(bottom.jpg) no-repeat; } 

.body { width: 960px; background: url(body.jpg) repeat-y; } 

<div class='container'> 

    <div class='header'>&nbsp;</div> 

    <div class='body'> 

內容放在這裏......使用浮動創建的，而不是絕對的定位柱。

</div> 

    <div class='footer'>&nbsp;</div> 

</div>