- ベストアンサー
IEでのdivタグの背景ずれについて
- IEにおいて、divタグの背景が画面サイズ変更時に1pxずれる現象が発生しています。
- この現象は必ず起こるわけではなく、予測が難しいため原因を特定することが困難です。
- 他のブラウザでは同様の問題が起きないため、IEの仕様の問題と考えられます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
当方でも試してみましたが、やはり背景画像の配置の計算と HTML要素の配置の計算が微妙に異なっているらしく、Firefoxでもズレを確認しました。 下のようにしてみるのは如何でしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> html { height:100%; margin:0; padding:0; } body { height:100%; margin:0; padding:0; } div.main { margin:0 auto; width:950px; height:100%; background: url('a.gif') repeat-y center top; } div.header { background-color: green; } div.contents { background-color: red; } </style> </head> <body> <div class="main"> <div class="header">ヘッダー</div> <div class="contents">コンテンツ</div> </div> </body> </html> イメージとしては、今までbodyに背景画像を指定していたところを、 950pxでセンタリングしたdiv要素（.main）に取り替えたと思っていただければ。 ポイントは、最初のDOCTYPE宣言で標準モードに統一することと、 html, body, div.main の height を 100% にすることです。 詳しいことは参考URLを見てください。
その他の回答 (1)
- buddhistic
- ベストアンサー率57% (30/52)
中央寄せや％指定のときのピクセルの計算は、時々いい加減なことがあるみたいですね…笑 ヘッダーとコンテンツを同じようにCSSを指定しているのに コンテンツだけずれるということでしょうか？（それだと不思議ですね） bodyが既に横幅が決められて中央寄せされているということですので、 各divのwidthとmarginを消してみては如何でしょうか？
お礼
＞ヘッダーとコンテンツを同じようにCSSを指定しているのに、コンテンツだけずれるということでしょうか？ 厳密には、「bodyの背景とdivが全く同じ大きさなのに、時々ずれる」ということです。 やはりＩＥのピクセル計算の仕様なんですかね。 ちなみにmarginのautoを外すと、divのセンタリングができないので消せないんですよ(;＿;)
お礼
わざわざ再現まで確認いただいてありがとうございました。 こちらでもbuddhisticさんの案を試してみました。 結果はIEは○、Fire Foxは△です。 IEは全く問題なしです。 > html { height:100%; margin:0; padding:0; } というのは盲点でした。 ただFire Foxで、スクロールが発生する画面の場合この方法では.mainを設定しているdivが「Windowサイズに対して100%の高さ」を持つようになり、スクロールした場合背景が途中で切れてみえます。 非常におしい！（ＴロＴ 今回の件の対応として、bodyにもmainにも背景を設定するようにしました。 IEで見た場合、bodyの背景とmainの背景がずれた場合、最初の状態だとヘッダーだけずれていましたが、mainもずれるのでずれが最初よりは気にならなくなりました。（右端のボーダーが1px太く見えるようになっています。） Fire Foxの場合、画面がずれた状態でスクロールを行うと、途中で片方の背景が1pxずれて見える状態になっています。 ただ、今私が行っている仕事はイントラネットの中だけで使用されるものであることと、クライアントがほぼFire Foxを使用しないということなので、説明だけして了解してもらうようにします。 いろいろと勉強になりました。 ありがとうございました。