1

我正在为我的教会创建一个网站，但无法在 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 中却不行。我上面的代码没有内容，删除它并不能解决问题。 运行页面

4

2 回答 2

2

对于如何分割背景图像，我会采取完全不同的方法。

  1. 为带有圆角的阴影创建顶部和底部图像。使用这些作为顶部和底部的背景（好像这还不明显）。
  2. 为两边的阴影创建一个“长”1px 高的图像。将其用于页面的整个内容区域的背景。
  3. 尽量不要使用绝对定位。可以使用浮动创建相同的布局。例如：

.container { 宽度：960px; 边距：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>
于 2009-01-03T00:11:33.930 回答
1

通过 IE 开发人员工具栏查看它，它使 .sidebox 居中对齐。将其更改为向左似乎可以解决它。

.sidebox {
  ...
  text-align: left;
}
于 2009-01-03T00:28:16.860 回答