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>