ウェブデザインの専門的な話

UTF-8の文字コードで制作したウェブサイトが、WindowsのInternet Explorer 6で見るとCSSの表示が乱れ、一部のCSS指定は効くのに、他は効かないという奇妙な現象が起きるというバグ。

原因をここ数年、解明しようとしていたのだが、 バグが起きないサイトと起きるサイトのCSSのコードの違いをリストアップしたところ、やっとわかったので解決方法を記す。

原因

外付けCSSファイルに「UTF-8でない文字コードの日本語文字」が入っているため。例えば、HTMLはUTF-8で書かれているのに、CSSはShift JISだとこの現象が起きる。

解決方法

CSSファイルの中に書き込んでいるコメントなどの日本語文字を全部削除するか、 CSSファイルそのものの文字エンコーディングをUTF-8にするとあっさり直る。

CSSファイルで一番最初に日本語文字が出てくる行以降で、指定が無効になってしまうらしい。他のブラウザーではまったく問題はないので、これはIE6だけ。IE7では問題ない。

Dreamweaverでは、デフォルトでShift JISを使ってCSSを書いてしまうようなので、注意が必要。CSSファイルは見た目には文字コードが見えないので、一番手堅いのは、日本語を一切使わないで英語でコメントを書くことだろう。半角英数字はエンコーディングがなんであれ、IE6でもなにも影響無いようだ。

—

Mac OS X アップグレードに関わる機材の事情で、新しいデザインにしたこのブログをIE6検証をしていなかったのだが、さきほど初めてチェックして冷や汗をかいた…。失礼いたしました。このブログのように日本語版WordPressを使っていたり、 最近のウェブ開発のトレンドに沿ってUTF-8で製作する場合には注意が必要だ。

カテゴリー：業界人しか理解不能
感想リストRSSフィード：RSS 2.0
トラックバック：http://www.yoshidesign.com/blog/archives/88/trackback