- ベストアンサー
FFとIEでスクロールバー、背景画像を表示しセンタリングするときのズレ
IE7とFF3とOpera9で表示確認をしています。 スクロールバーを常時表示し、背景をセンタリングしたデザインをしたいと考えています。 FF3でスクロールバーを表示すると、背景よりボックスが1px右にずれてしまいます。 IEはもともとずれるのが判っているのでハックを使って調節しています。 Operaだと理想どおりに表示されます。 仕方が無いのでFFもハックして表示しました。 ソースは以下のとおりです。 実際こんなにハックしなくとも、スマートに表示できる方法があるのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style> <!-- body{ margin: 0; paddin:0; background-image:url(design/bg4.jpg); background-repeat:repeat-y; background-position:center; } /* firefoxのハック */ body,x:-moz-broken { margin-left:-1px; overflow-y:scroll; } /* IE7のハック */ *:first-child+html body { padding-left: 2px; overflow-y:auto; } /* IE6以下のハック */ *html body { overflow-y:auto; padding-left: 1px; } .base{ margin:auto; width:750px; background-color:red; } --> </style> </head> <body> <div class="base"> <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </body> </html> 何かわかることがありましたら、よろしくお願いしたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
一般的には、bodyに背景を設定するとズレます。 なので、一番簡単な方法はdivでくくって、divに背景を設定しましょう。 これで解決するはずです。 あとは。背景画像にどんなものを使っているのかわからないので、 なんともいえませんが。。 divを余計に増やすようでいやな感じがするかもしれませんが、 divが一個増えたからといってページランクが落ちることはまずないでしょう。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
html, body{ margin: 0; padding:0; border: 0 none; } <html>にもmarginとpadding、それに念のためborderを指定 でどうでしょうか？ 私はこの２行を必ず書いてます。 背景画像は必ずと言っていいほどbodyに指定していますが、背景が1pxずれるなどの状況に遭遇したことはありません。 *{margin:0;padding:0} body{background-color:white;color:black;}
補足
早速のご回答ありがとうございます。 背景画像はこちらです。 ttp://eea.sessya.net/bg4.jpg divでくくるとずれないということは知りませんでした。 早速、試してみることにします。