[HTML]特定のブラウザで画面が真っ白に表示される

特定のブラウザで画面が真っ白になる場合があります。

ソースを表示させると、きちんとHTML自体はブラウザにダウンロードされている。
ブラウザのエンコードも問題ないし、ファイル自体の文字コードも合っている。
現象が確認できるブラウザでは再現率100%。
開発していたブラウザではちゃんと表示されていたのに、どうして?

そんな問い合わせが時々あります。

こういった場合は「文字化け」を疑います。
例えば次のソースを見てみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
・・・以下略

一見すると正しい記述に見えますが、この記述だとmetaタグで「utf-8」が
指定される前にtitleタグ内のマルチバイト文字「タイトル」が現れます。

ブラウザがエンコードを認識する前にマルチバイト文字を読みこみ
一部のブラウザではタイトルの時点で文字化けが発生する場合があります。
結果としてブラウザには白い画面しか表示されなくなります。

解決策としてはタグの順番を入れ替えればOKです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>タイトル</title>
・・・以下略

titleタグに限らず、日本語(マルチバイト文字)が出力される前に
必ずエンコードを指定しておけば良いでしょう。

しかしながら、修正したファイルを本番サーバにアップしたときに
即時反映されない場合があります。

典型的ですが、こういった場合はサーバやクライアント側のキャッシュである可能性が考えられます。
クライアント側のキャッシュをクリアし、許されるならサーバキャッシュの削除、もしくは再アップロードで動作する場合があります。

いずれにしてもWebで開発する以上は、宿命的にブラウザ対応(主に文字化け)との戦いをしていくことになります。

仕様を統一してくれないかな、というのは世界中のWeb系エンジニアの願いです。。。

※ご注意
掲載している内容についてはご自身の責任で参考にされてください。