- 締切済み
IE7で閲覧した際にCSSで配置した背景画像がずれる
スタイルシートにて、 以下のように設定して背景画像を表示させているのですが、 body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-image: url(../images/body_bg.gif); background-color: #FFFFFF; background-repeat: repeat-y; background-position: center top; } マックのsafari、firefox、WINのIE6、firefox等では問題なく センターに背景画像が配置されて表示されるのですが、 IE7で表示すると、横に余分な空白が生じて、 背景画像のみが左のほうにずれてしまいます。 おおよそですが、bodyの横幅が右に2倍に 増えている感じで、スクロールバーを右に動かすと、 意味のない空白ができています。 IE7のハックというものを使用して、上記のbodyタグの下に 背景画像の設定を外した、下記の記述を追記し、 さらに、.bodybgというクラスタグで 背景画像を設定してみたのですが、結果は同じでした。 *:first-child+html body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-color: #FFFFFF; } *:first-child+html .bodybg { background-image: url(../images/body_bg.gif); background-repeat: repeat-y; background-position: center top; } どうしたら、背景画像のずれが直るのでしょうか? また、このバグはbodyタグではなく、その他のスタイルが 影響しているのでしょうか? どなたかご存知の方お教え願えませんでしょうか。 よろしくお願い致します。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
body以外のcssの影響ですね。 marginやpadding等をどこかで指定されていると思うのですが・・・ body内の要素にborderを指定してみてどの要素が余白を取っているのか検証されるのが早いのではないかと思います。