Firefox で レイアウトが崩れる問題

 昨日友人に「Firefoxで見るとレイアウトが崩れてるよ」と言われました。確認してみると、ひどいもんでした。自分は Firefox を入れていなかったので、全く気がつきませんでした。Firefox って、Sleipnir や他の多くのタブブラウザのような、IE コンポーネントのブラウザではないんですね。独自で表示させているみたいです。そんなわけで、IE で 適当に表示させていたところが、Firefox だと崩れるようです。
基本的にスタイルシート (CSS) の仕様に細かい差異があるようです。

詳細は以下(タグ打ちでHP作ってる人は参考にしてください)

 とりあえずこの BLOG が崩れていたのは、スタイルシートの言語定義で "Shift_JIS" の部分が "Shift_JISs" とタイプミスしていたのが原因でした。IE だとちゃんと Shift_JIS と認識されるようですが 、Firefox では融通が利かないみたいです。

 このBLOGの親ページのものづくり道の方の崩れ方はかなり厄介でした。全部の文字がセンタリング状態になっており、また画像と文字の位置バランスも崩れてました。

 まず、文字がセンタリングされていた問題は、スタイルシートで

text-align="left";

と記述していたのが原因でした。IE だとこれで認識してくれるのですが、Firefox だと無視されます。正しくは
text-align:left;

です。

 画像と文字の位置バランスですが、IE の場合、画像を表示させたあと、改行しなければ横に文字を書けるのですが、Firefox だと、スタイルシートを中途半端に定義してしまうと、必ずしもそうはならなくなるようです。IE では適当に誤魔化して配置していたのですが、Firefox だとうまく表示されませんでした。ちゃんと TABLE を使って定義することによって解決しました。

 IE で ul (マーク付きリスg) を使用する際、padding-left:0px を指定しても、左側の margin は確保されるのですが、Firefox の場合、margin も 0 になってしまうようです。IE と Firefox で margin と padding の定義が違うんでしょうか?以下その例です。両方のブラウザを持っている人は比べてみると、違いがでるはずです。Firefox は全体が左寄りになって崩れているはずです。

  • (左マージンのサイズが Firefox と IE で違う例)

 また全体の枠の大きさを、heigth:95% としていたのですが、IE では、無視されていたようなのですが、Firefox だと適用され、レイアウトが崩れてしまいました。これはこの部分を削除することによって解決。

 解決策が分からなかったのが、Firefox だと 縦スクロールバーが表示されると時と、表示されない時で全体の横の配置がずれるという問題があるようです。普通のページならば問題にならないのかもしれませんが、ものづくり道のページのように、上部にタグを設置している場合、ページを切り替える際に、スクロールバーの有無で全体が左右にぶれてしまい、若干見づらいものになってしまいました。誰か解決策知りませんか?

 最後に、デフォルトのフォントが、IE と Firefox では違うようなので、明示的に指定するほうがいいかと思います。

たとえば

body{ font-family : MS UI Gothic; }

という風にします。ただ結局これでも、マイクロソフト以外のOSではちゃんと表示されないかもしれませんけどね。

そういや、世の中には Netscape というブラウザもありましたね。いろんなブラウザのことを考えてホームページを作るのは大変ですね。もうみんな IE でいいじゃん(笑)



投稿者:mimiham : 2004年12月16日 02:13 : PC ・ ネットワーク

トラックバック

このエントリーのトラックバックURL:
http://mono-zukuri.net/cgi-bin/mt/mt-tb.cgi/14

このリストは、次のエントリーを参照しています: Firefox で レイアウトが崩れる問題:

» IEでもFirefoxでも崩れないレイアウト
from Text Ocean

「Firefoxで自分のウェブサイトを見ると表示が崩れている!」というのは、正しくは「表示が崩れるブラウザを使い続けていたことに気付いていない」と言えちゃう、言... [続きを読む]
トラックバック時刻: 2005年01月15日 17:06

コメント: Firefox で レイアウトが崩れる問題

CSSの解釈の正確さは、IEよりもFireFoxの方が上です。
むしろCSSコーディングではIEのバグが頭を悩ませる要因NO.1だと思います。

IE・Opera・FireFox・Netscapeと、主要ブラウザは各種ありますが、
FireFoxで普通に表示されるならば、Netscapeは大体大丈夫なはずです。
問題はIEとOpera。
正確に表示させるためには、CSShackと呼ばれるような「裏技」的なコーディングが必要になることがあります。
”ボックスモデル” ”ハック”などの単語で検索すると、解説しているサイトがいくつかみつかるでしょう。

「ブラウザが一つに絞られたら」
これはWebに関わる人すべてが思う事だと思いますよー。

投稿者 jun : 2005年09月02日 02:58