1

教会の Web サイトを作成していますが、IE で正しく表示するのに問題があります。私のdiv「サイドボックス」の背景位置が「マージン：0自動」によって上書きされているようです。背景が右ではなく中央に表示されるため、サイトが右に移動します。

コードは次のとおりです。

.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. 両側の影用に高さ 1 ピクセルの「長い」画像を作成します。ページのコンテンツ領域全体の背景として使用します。
  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 に答える