1月 30

私が管理しているHPがIE6でうまく表示されていないという連絡を受け、修正を行ったのですが思いのほか苦戦したのでご紹介します。問題のページはXHTML+CSSで作成しており、DIVタグでのカラム組やLISTタグのスタイル指定などを施していました。以前はIE6での表示が正常に確認出来ていたのですが、最近は制作環境をIE7化していたためしばらくの間IE6での確認をしていませんでした。

あらためて、確認しようとするもはてさてIE6をどこから引っ張ってくるかということでいろいろやりはじめました。まずAdobeのBrowserLabで表示を確認してみることに。が、IE6の表示が乱れるのはいいとしてIE7まで乱れている。手持ちのIE7で問題はないのでこれはおかしい。Browserlabも完璧ではないのだなぁとBrowsershotでスクリーンショットを取り寄せると相変わらず文字化け等がいっぱいあるもののどうやらIE6だけ表示が乱れている模様。

で、その乱れ方なのですがDIVのwidthが狂ってるのはまぁ仕様としてよく言われている部分もあるとして、何ピクセルずれてるとかそういうレベルではなくそもそも全くWidthが入っていない時の動作をしていらっしゃる。けど、一部効いているタグも見受けられる。リストのスタイルも完全に標準でCSSが効いていないご様子。けど、他の部分で一部効いているスタイルは間違いなく存在している。CSSが途中までしか読めていないかと思ってみてみるも効いているスタイルはあちこち分散。全く関係なさそう。Floatが悪い?、とかなんかのバグにあたった?とかいろいろ検索しつつ試行錯誤するも全然ダメ。どうにもCSSも一部がうまく読めていないとしか思えない。けど、IE6だけ。もちろんHTMLのバリデーションはノープロブレム。

いろいろ悩んだ末、もしかして文字コードかという結論に至りました。で、CSSの文字コードを明示的にUTF-8に指定した結果無事表示されるように。どうも明示的に指定してないCSSを読み込ませるとうまくいかない場合があるということでしょうか。あんまりにCSSの表示が滅茶苦茶で適用されてない、という場合は文字コード指定もよく見直すようにしてみてください。特にこの問題に関してはBrowserlabやIETesterでは再現が微妙でIE7でも崩れるなど変な挙動を示すのが特徴でしょうか。これらも必ずしも正確ではないということですね。早くIE6いなくなってくれないかな・・・。

written by azuma \\ tags: , , , ,