ブログ名の設定は、まだ。 ネット社会の一粒の"地の塩"でありたいと思っています。

今さらながら、IEでWebページ(XHTML/UTF-8)が文字化けする件。

2013年10月18日 · カテゴリ:雑記

HTML制作(特にコーディング)の関係者だけの小ネタ話です。

もうネット上では散々出まくった「IE迷惑話」の1つではありますが、私もIEでWebページ(XHTML/UTF-8)が文字化けするケースに遭遇しました。
(遭遇というか相談を受けたのですが)

IEブラウザでエンコード方式は、(ほとんどのユーザーがそうだと思いますが)「自動選択」にしていると思います。それはそれで別にマズイ設定ではないはずです。

ただ、そのIEユーザーがWebページ(XHTML/UTF-8)を見たときに、文字化けすると言ってきたとのこと。まずいことにIEのバージョンを聞けていないところが痛いですが、とりいそぎ当該のWebページを確認してみました。

XHTMLの文字化けで最も多いケースが、メタタグの文字コード宣言(;meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />)だけを使っていて、その宣言より先に日本語Titleタグを書いてしまっているもの。

<title>ホームページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

ある意味、この順序間違いは論外というか、宣言前に日本語を読んで「Shift_JISだ!」って勝手に誤解するIEもアホですが、HTML制作的にはケアレスミスかと思います。

その昔の話ですが、古いDreamweaver(ver.3あたり)ではデフォルトでタイトルが文字コード宣言の前にあった記憶があります。ま、アメリカ人の作ったソフトですから、2バイト言語への配慮なんか後回しだったんでしょう。

で、話をもとに戻しますが、相談を受けたページはきちんと順序よく文字コード宣言が先に書かれていたのですが、

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

と、メタタグでの宣言。
そもそもXHTMLでの文字コード宣言は上記のようなメタタグではなくて、先頭(DOCTYPE宣言の前)にXML文書の宣言をして、そこで

<?xml version="1.0" encoding="UTF-8"?>

とencodingも書くようにと言われたりします。

ただググると、IE6に限っては上記の書き方をしてもダメなケースがあるようで、
奈良県の制作会社(W3G合同会社)さんのサイトに

Internet Explorer 6 では XML宣言を記述することで強制的にレンダリングモードを仕様に準拠していない独自のレンダリングを行う後方互換モードに切り替えてしまうバグがあるので注意してください。

という情報がありました。
IE6はすでにターゲットブラウザから除外してくれるクライアントも大多数を占めてきていますので、できればIE6は無視したいところです。

結局、専門の方にダメ出しされそうですが、上記の文字コードの宣言を

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

と2重に入れてしまいました。

あと念には念をということで、cssファイルのほうにも宣言がなかったので、ホントにUTF-8で書かれているか確認したうえで、

@charset "utf-8";

を書き足してみました。

結局というか、実は自分のPCWindows7(64Bit版)のIE10やIEテスターでVer.6/7/8/9を使ってみたのですが、文字化けの現象が初めから再現できていないので、手探りでやっているので、上記の対策で解決したかわからないという尻切れトンボな話ですみません。

そんな対策でもIEが化けるなら、あとは.htaccessが使えるサーバなら、それに書いちゃうか、ですかね。
AddDefaultCharset UTF-8
ただし当然UTF-8 以外の文字コードがないことが条件ですけど。

« 1つ古い記事:

1つ新しい記事: »

Leave a Reply

Trackback URL

記事テーマと関係ないとか、リンクがない場合(一方的TB)、あとアダルトサイトは申し訳ないですが承認しませんので予めご了解ください。またrel="nofollow"つけてるので、SEOのリンクジュースが目的のコメント、TBは残念ながら効果が無いと思います。予めご承知おきください。