このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

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








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら


    うちもまったく同じ症状ですね
    Chromeなら見れます
    win 7 home premium sp1 64bit
    名無し | 2013/04/04/Thu [EDIT]
    同じく崩れました。。。
    名無し | 2013/04/04/Thu [EDIT]
    21も崩れました
    名無し | 2013/04/04/Thu [EDIT]
    20にしたら崩れました
    xp sp3
    名無し | 2013/04/04/Thu [EDIT]
    ご報告ありがとうございます。

    頂いた情報から見るに
    多くの方に同様の症状が出ているようですね。
    早く直って欲しいです。
    うみの さち | 2013/04/05/Fri [EDIT]
    どうやらid="navigation"の所だけUTF8が混ざっている様子で、他の所はISO-2022-JPです
    ttp://www.dotup.org/uploda/www.dotup.org4104691.png
    このせいでごっそりと抜けが生じた感じですね
    名無し | 2013/04/05/Fri [EDIT]
    そのサイト、文字コードおかしい
    名無し | 2013/04/05/Fri [EDIT]
    あー、htmlとcssで文字コードが違うんだな
    名無し | 2013/04/05/Fri [EDIT]
    htmlの中だけでもiso-2022-jpとutf-8が混在してるな
    Fx20は厳密に解釈してるだけなのかもしれんなぁ
    TBSが使ってるweb屋がいかんって事で
    名無し | 2013/04/05/Fri [EDIT]
    予想
    多分、そのサイトの左のナビゲーションバー部分の文字のエンコードが、UTF-8だからじゃないですかね。
    今までなぁなぁにしてた部分を厳密にしたら、こんな事になりましたっていうことなのかな。
    よし | 2013/04/05/Fri [EDIT]
    TBSのサイト制作者は恥を知るべきかと
    ソース見てみたがひどいです
    違う文字コードが混在してますし、あきらかにサイト側の問題です
    Firefoxを叩いたほうが面白いのはわかりますが
    もうすこしちゃんと調べなさい
    名無しさん | 2013/04/05/Fri [EDIT]
    Chromeからソースを見たときに
    文字化けを起こしていたので気になってはいたのですが
    そのような理由があったのですね。納得しました。

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

    原因をしっかり特定できなかったのは私の勉強不足でした。
    教えて頂いたこと、非常に感謝しています。
    原因については記事内に追記します。
    コメントを下さった方々ありがとうございました。
    うみの さち | 2013/04/06/Sat [EDIT]
    Firefox20で他にも不具合が・・・
    当方はこちらに書かれている症状は出ていませんが
    ver20にアップデートするとPersonasテーマが適用されなくなりました
    適用したことになっているのに実際はデフォルトのままです
    現在はダウングレードして19を使っていますが
    今回のverは安易に更新しない方が良さそうですね・・・
    上記と同様の症状が出ている方がいらっしゃいましたら
    対策法など教えて頂ければと思います。
    名無し | 2013/04/06/Sat [EDIT]
    自分も崩れてますが、ダウングレードで直りませんでした。
    JAVAをアップデートした後になったような気もします。復元してみるか・・・
    名無し | 2013/04/07/Sun [EDIT]
    たった今、Firefox 19.0.2 → 20.0 に更新しましたが、何の問題もなく正常に表示されています。
    WinXP Pro sp3 32bit
    名無し | 2013/04/09/Tue [EDIT]
    ただいま20.0で開いてみたところ正常に表示されました。
    本当にforefox側の問題だったのでしょうか。

    と、書き込もうとしたらもう解決されてた」のですね。
    名無し | 2013/04/10/Wed [EDIT]



    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ