今回はFirefoxでスクロールバーの有無でコンテンツの位置がずれるというものです。Windows IE6ではデフォルトでスクロールバーは表示されているので問題ではないのですが、Firefoxはコンテンツの量がブラウザのウインドウの高さを下回るとスクロールバーが出てきます。これが問題になります。サイトを中央に表示していたりすると確かに気になったりします。スクロールバーがある状態からない状態にとブラウザのウィンドウを小さくしていくと、コンテンツが少しずれるのが見られます。しかしこれは正常な動きではあるのです。例えばmargin{ 0, auto ;}とすると、横の位置は当然中央になります。Firefoxはスクロールバーがをぬいた位置で計算していると思われます。だからスクロールバーがあるかないかで当然中央の位置が微妙にずれてくると思われます。(あくまで個人的な見解です。)
スクロールバーの有無によってコンテンツの位置がずれるのをしょうがないとするか、これも直すべきだとすべきかはどちらかは判断できませんがずれない方法はあります。それは常にスクロールバーを表示させると言うもので、Windows IE6の仕様と同じにすると言うことです。それならば常にスクロールバーがでているのでコンテンツがずれることはありません。CSSの指定でbodyにoverflow-y: scroll;とすればいいのです。それで常にスクロールバーが表示されている状態になります。
CSS
[css]
body{
overflow-y: scroll;
}
[/css]
となります。
ちなみに「overflow」ではないので注意が必要です。overflowだと横にもスクロールバーが出てしまいます。
これはWeb creatorsにを参考にしています。