Firefox 20 でサイトの表示が崩れる

こんにちは、さち です。

先日、Firefox 20 が正式にリリースされたので
さっそくアップデートして使っていました。

しかし、あるサイトの表示が崩れている…。
サイト作成時のミスなのかなと思い
Firefox以外のブラウザで見てみるとちゃんと表示される…。

Firefox だけに起こるこの不具合について
少し調べてみました。

Firefox 20 でサイトの表示がおかしい

1. こちらが実際に表示が崩れたページ。
   ロゴ，メニューの一部，めり込んだ枠線らしきものが見えるだけで
   あとは真っ白な状態。明らかに表示がおかしいですね。
   
2. こちらが Google Chrome で同ページを開いたもの。
   Internet Explorer, Opera も同様の表示結果でした。
   本来はこのように表示されるのだと思います。
   
3. アドオンが原因かもしれないので
   アドオンを無効（セーフモード）にして Firefox を起動。
   
4. しかし、表示は直らず…。
   

とりあえず、ウェブページの表示崩れは
アドオンが原因ではないと分かりました。

原因を探ってみる

表示が崩れてしまったサイトのソースを Firefox でのぞいてみます。

1. ソースの最後に </body> </html> タグがあるので
   一見ちゃんとソースを読み込んでいるように見えます。
   
2. しかし、一部しか表示されないメニュー部分を調べると
   <table> タグなしで突然テーブルの記述がはじまっています。
   

さすがに、ウェブ制作のプロがこんな記述をするわけがない。
他のブラウザからソースをのぞくと
やはり <table> タグが記述されていました。

つまり、今回の症状の原因としては
Firefox がソースを読み込めていないということ。

ただ、メジャーなブラウザでの表示チェックはしているはずで
Firefox のこの症状に気づかないなんてまずありえない。
そう考えると、最近正式リリースされたばかりの
バージョン「20」特有の症状なのではないかという予想に。

【 追 記 】
ページの表示崩れは文字コードの混在が原因のようです。
「19」まではFirefoxが柔軟にフォローし表示していたものが
「20」からはその仕様が変更となったために
このような症状が出たのではないかとのこと。
コメントを下さった方々、ありがとうございました。
現在はサイトが修正され正常に表示されます。

Firefox を「19」にダウングレードしてみる

この症状は「20」特有のものなのかを調べるため
こちらの方法を使い Firefox を「19」に戻しました。

改めて不具合が起こったページを
Firefox 19 （アドオンはオンの状態）で開いてみると
今度は問題なくちゃんと表示されました。

予想通り、症状は Firefox 20 固有の症状のようです。
「20」でレンダリング関係の仕様に変更があったのでしょうか。

Firefox 20 なら必ず起こる症状なのか
それとも、PC や Firefox の設定によって起こる
個人的な原因があるものなのかよく分かりません。
ぜひ Firefox 20 を使っている方は
同ページで表示崩れがないか教えて下さると嬉しいです。
【追記】 現在はサイトが修正され正常に表示されます。

とりあえず、私は「20」のマイナーアップデートが来るまでは
Firefox 19 で様子をみてみようと思います。