スポンサーリンク

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

この記事は約3分で読めます。

操作画面

こんにちは、さち です。

先日、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 で様子をみてみようと思います。

コメント

  1. 匿名 より:

    うちもまったく同じ症状ですね
    Chromeなら見れます
    win 7 home premium sp1 64bit

  2. 匿名 より:

    同じく崩れました。。。

  3. 匿名 より:

    21も崩れました

  4. 匿名 より:

    20にしたら崩れました
    xp sp3

  5. うみの さち より:

    ご報告ありがとうございます。

    頂いた情報から見るに
    多くの方に同様の症状が出ているようですね。
    早く直って欲しいです。

  6. 匿名 より:

    どうやらid="navigation"の所だけUTF8が混ざっている様子で、他の所はISO-2022-JPです
    ttp://www.dotup.org/uploda/www.dotup.org4104691.png
    このせいでごっそりと抜けが生じた感じですね

  7. 匿名 より:

    そのサイト、文字コードおかしい

  8. 匿名 より:

    あー、htmlとcssで文字コードが違うんだな

  9. 匿名 より:

    htmlの中だけでもiso-2022-jpとutf-8が混在してるな
    Fx20は厳密に解釈してるだけなのかもしれんなぁ
    TBSが使ってるweb屋がいかんって事で

  10. よし より:

    多分、そのサイトの左のナビゲーションバー部分の文字のエンコードが、UTF-8だからじゃないですかね。
    今までなぁなぁにしてた部分を厳密にしたら、こんな事になりましたっていうことなのかな。

  11. 名無しさん より:

    ソース見てみたがひどいです
    違う文字コードが混在してますし、あきらかにサイト側の問題です
    Firefoxを叩いたほうが面白いのはわかりますが
    もうすこしちゃんと調べなさい

  12. うみの さち より:

    Chromeからソースを見たときに
    文字化けを起こしていたので気になってはいたのですが
    そのような理由があったのですね。納得しました。

    この記事にFirefoxを叩く意図はありません。
    Firefoxを日常的に愛用しているので
    今後の開発にも期待しています。

    原因をしっかり特定できなかったのは私の勉強不足でした。
    教えて頂いたこと、非常に感謝しています。
    原因については記事内に追記します。
    コメントを下さった方々ありがとうございました。

  13. 匿名 より:

    当方はこちらに書かれている症状は出ていませんが
    ver20にアップデートするとPersonasテーマが適用されなくなりました
    適用したことになっているのに実際はデフォルトのままです
    現在はダウングレードして19を使っていますが
    今回のverは安易に更新しない方が良さそうですね・・・
    上記と同様の症状が出ている方がいらっしゃいましたら
    対策法など教えて頂ければと思います。

  14. 匿名 より:

    自分も崩れてますが、ダウングレードで直りませんでした。
    JAVAをアップデートした後になったような気もします。復元してみるか・・・

  15. 匿名 より:

    たった今、Firefox 19.0.2 → 20.0 に更新しましたが、何の問題もなく正常に表示されています。
    WinXP Pro sp3 32bit

  16. 匿名 より:

    ただいま20.0で開いてみたところ正常に表示されました。
    本当にforefox側の問題だったのでしょうか。

    と、書き込もうとしたらもう解決されてた」のですね。

タイトルとURLをコピーしました