Firefoxでなぜか全体のセンタリングがずれるという障害。

こちょこちょxhtml1.0で問題無いようお仕事なページを修正しているんですが、IE7.0やOpera9.26では問題無いのに、Firefox2.0だとページ全体の中心線が微妙に左にずれるという訳の解らない障害が発生していたのです。

それもトップページとかはどのブラウザでも問題無いのに、少し縦が長いページを開いた場合だけFirefoxですこーし左にずれるってな感じで、もう二週間ぐらい悩んでたんですよー！

そしたら今日になって「div firefox 中心　ずれる」とかってGoogleで検索したら先人の解決策を発見！


これと、、、

これの違いだった！！

つまり、中心がずれたというよりも、Firefoxだと縦がながーいページを開いた時だけ縦（y軸）のスクロールバーが出るもんで、これでページの表示範囲が少しだけ狭まって、中心がデザイン的に動いてしまったように感じてたのさ！っていうか、divの書き方の問題かあ、元からチェックしたり直すの辛いなあ、とかヘッダーとメインとフッターはdivではくっついて無いのに、なんで綺麗に揃って三人ともずれんの！とか夜も寝ないで昼寝するぐらい悩んでたんで、なんとも変な気分。

しかし、全然、気が付かなかった、スクロールバーが出たり出なかったりしてたことに！というか、座ってる位置的にモニターを右方向から覗き込んでるから、逆に右端が死角だった模様、、、。

ついでに、これが問題なら多分Operaでもずれたと感じていた筈、なぜ？と思ったけど、こちはら簡単な話でした。いっつもどのブラウザも画面いっぱい広げてテストしてるんですけど、Operaに比べてFirefoxはページを表示する縦幅が同じフルスクリーンでも狭かったから。


こんな感じで私のFirefoxは上部のタブが結構ぶあつい。

Operaではながーいページもスクロールバーが出る程では無かったみたい。

で、最終的な解決策がこちら様のページの一番下の方法。

「height:100%; margin-bottom:1px; という方法」。
http://neo.s21.xrea.com/web/006.html

なんかOperaだとバーの影だけ常に出しておいても、実際にバーが必要になって浮き出た時には、また微妙にずれるし。この方法って凄いなーって思いました。

これでやっとページのテンプレートが完成した！

・IE7.0
・Opera9.26
・Firefox2.0
・Safari3.0.4
・Netscape7.1

どれも問題無くなったー。

ありがとー！