FireFoxのスクロールバー分のズレをとるCSS

2006年9月26日

FireFoxで表示したときページが縦方向にきっちり収まっているとき、スクロールバーの分だけスクロール時で表示されている時と比べてズレてしまいます。
デザイン自体には問題はありませんが、コンテンツが縦にきっちり収まっているページからコンテンツの長いページにページ移動する際にカクっとズレの動きが生じてしまいます。
な～んか気持ち悪いなぁと思ったときは

body {
overflow-y:scroll;
}

とするとページ移動の際のズレの動きがなくなります。
しかし、ＩＥ6、IE7ではブラウザ自体のスクロールバーとは別にもうひとつ内側にスクロールバーができてしまいます。
そこで対処法としてＩＥ６用CSSハックの*htmlとＩＥ7用CSSハックの*+htmlを利用して

*html body {  　　　　　/*IE6だけに適用*/
overflow-y:auto;
}
*+html body {　　　　　/*IE7だけに適用*/
overflow-y:auto;
}
body {
overflow-y:scroll;
}

とすればFireFox、ＩＥ6、ＩＥ７ともにきっちり表示されます。

このブログのようにJavascriptのコンテンツの折りたたみといったエフェクトを使用しているとページが開いた瞬間は、まだコンテンツのＣＳＳがhiddenの状態になっているので、FireFoxではカクっとズレの動きができてしまいます。今後こういうエフェクトを使うサイトには重宝するＣＳＳなんじゃないかと思いました。