IE9ヤバイ。悪い意味でヤバイ。サイト運営者によっては「これIE6より酷いんじゃない？」ってなりそうな出来栄え。一般ユーザーとして利用するにも、Webサイトが対応するまでは微妙に不便になりそうです。

IE9にして気が付いた事

この辺の違いはなんだろうなー？
と色々なサイトのHTMLコードやスタイルシートとニラメッコしているうちに、サイトのDOCTYPE宣言と文字コードの指定で上記の違いが出ることが分かりました。
これ、不具合として修正されると良いんだけど･･･無理だろうなぁ。。。('Α`)

追記：この現象はサブピクセルフォントレンダリングの弊害？

どうやら原因はこれみたいですね。。。
【レポート】IE9、サブピクセル配置技術でテキストのズレを解消 | エンタープライズ | マイコミジャーナル
IE9はサブピクセルフォントレンダリングを行うので、フォントサイズの微妙な調整も可能。→ その結果ClearType表示しない場合は、中途半端なサイズを指定されたフォントは文字間隔がバラバラになる。。。

このページに書いた諸々は、フォントサイズの調整やフォントファミリーの指定方法を変更すれば解消されるかもしれません。
(検証してみました → IE9 用のCSSハック？Webページのフォントサイズ指定で今後注意する事 )

ホッテントリ後の追記

たくさんのはてぶ＆ツイートありがとうございます！
このページの情報は、私が冷静でない＆問題の切り分けが出来ていない箇所が沢山あります。私が冷静でないため不要に煽っている部分も沢山ありそうです。

以下ページ
IE9ヤバイの話。 - NO UIHARU, NO LIFE. - subtech
で予備知識を仕入れてから、このページをお読みいただき、間違っている部分･大袈裟に書いている部分は鼻で笑って頂くのが正しい読み方です。
mayukiさん他、はてぶで冷静なツッコミをくれた方ありがとうございます。

追記終わり。以下、本文の続きです。

スポンサー リンク

IE9文字間隔確認用サンプル

文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。

※追記･注意：下記ページはスタイルシートで少しだけ調整しています。
body {margin: 30px 50px;font-family: verdana,sans-serif;}
h1{font-size:16px;line-height: 20px;}
p{line-height: 1.2;}
　全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが
　文字コードで変わったり、かなり比較し難いものになったため。
　後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。

※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし)

HTML 4.01 サンプル
HTML 4.01+UTF8　　HTML 4.01+EUC-JP　　HTML 4.01+SHIFT-JIS　
XHTML 1.0 サンプル
XHTML 1.0+UTF8　　XHTML 1.0+EUC-JP　　XHTML 1.0+SHIFT-JIS

1行目のxml宣言を削除 (IE9では関係ないっぽい)
XHTML 1.0+UTF8　　XHTML 1.0+EUC-JP　　XHTML 1.0+SHIFT-JIS
※過去のIEはHTMLの1行目が「xml宣言かDOCTYPE宣言か」、で後方互換モードの発動を切り替えたりしてたので、念のためxml宣言を削除したものも用意。

IE9のフォントをメイリオ･MS Pゴシックで切り替えながら、各サンプルを見比べると違いがよく分かります。かなり酷い。
気のせいじゃなかった。やっぱりDOCTYPE宣言と文字コードでもの凄い違いが出る。。。

　

いやはやこれ、スタイルシートの組み方によっては、IE9では盛大なレイアウト崩れが発生しそうですね。。。

IE9で文字間隔がおかしくなるWebページ

XHTML 1.0で記述されたWebページ全般 ＞MS Pゴシックで字間が詰まる
  • XHTML 1.0で記述されたWebページをMS Pゴシックで表示する場合、IE9では文字間隔が詰まってしまい、かなり読み難いものになります。
  • メイリオで表示すれば大丈夫
  • IE9を互換モードで表示すれば文字間隔は正常に戻る。
    でもWebページのレイアウトが崩れる場合あり。
    文字コードShift-JISにした場合、段落の高さに違いが出る場合も。　

IE9でフォント指定すら上手く行かないWebページ

IE9では、メイリオで表示出来ないサイトが発生する･･･？
  • 2011/05/08追記
    この項目には正しくない記述がありました＞＜
    • 正しくない記述
      　下記で「ページ内で日本語フォントの指定は一切行っていない。」と書いていますが、font-familyにverdanaとsans-serifを記述しています。
    • font-familyにverdanaとsans-serifを記述した意図
      　ブラウザのフォントにMS Pゴシックを利用した場合に、半角英数字が意図しないフォントに変更されないようにしたつもりでした。
      ですが、font-family にsans-serifを指定することが、この現象が発生するトリガーだったようです。
    以下、とりあえず初稿をそのまま掲載しておきます。
  • XHTML 1.0 + Shift-JIS と XHTML 1.0 + EUC-JPのページは、
    上記はページ内で日本語フォントの指定は一切行っていない。
    でも、IE9のフォント指定をメイリオにしても、MS Pゴシックで表示される。
    やばい。なんだこれ？
  • つまりサイト運営者も閲覧者もメイリオで表示させたいと思っているサイトが、なぜかMS Pゴシックで表示される現象が発生する。
  • 大問題だろこれ

IE9でも正常な文字間隔で表示されるWebページ

HTML 4.0で記述され、文字コードShift-JISまたはEUC-JPを指定したページ
  • HTML 4.0で記述されていても、文字コードUTF-8を指定してた場合、(ごく稀に)行間隔がおかしくなる場合もある。

以下はサイトデザインとは関係なし。
セキュリティとか、機能面のお話になるのかな？
二つの例を挙げていますが、たぶん他にも沢山のサイトがIE9では利用できない事になっていそうです。

その他、IE9で正常作動しないサイト

  • MovableType の管理画面が使えない
    MovableTypeとは、ブログ形式でサイトを構築･運用するためのCMS。このサイトもMovableTypeで運営しています。
    • 画面が盛大に乱れる。各種ボタンが有効にならない。
    • IE9の互換表示を有効にすれば、MovableTypeは正常に作動します。
    • でも、互換表示を有効にする事で、制作したWebサイトの表示がくずれる場合があります。。。
    • IE8に続き、IE9でもMovableTypeでサイト管理出来ない。。。
  • 一部のショッピングサイト
    一部のお買い物サイトが上手く作動しません。
    • HG
      ▲お買い物出来なかったサイト、Heaven-Gifts。
    • IE9のセキュリティがガチガチすぎるのかと思いきや、これまた互換表示を有効にしただけで普通にお買い物できた。
    • 互換表示を無効にするとTopページのFlashファイルが再生出来ないので、ActiveXやクッキーがセキュリティで引っかかっているのかもしれない?
    • いずれWebサービス･オンラインショップ側が対応して来るんだろうけど、IE8時代からお買い物やその他パスワードが必要な重要サイトはIE管理だっただけに、かなりショック。

ネット上にはIEじゃないと正常作動しないって設計(に敢えてしている)Webサービスがいくつか存在しているんだけど、そういうサービスしているサイトは大丈夫なんだろうか･･･？

追記：IE9の互換モードについて補足

以下のようなページ発見
IE9のブラウザーモードとドキュメントモード - hachy.net
Internet Explorer で一部の Web サイトが正常に動作しないことがある microsoft
IE9には、サイトにタグを記述することで互換表示を有効に設定する方法もあるようです。

HTMLのHEADタグ内に
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
　　　IE=***の部分は
　　　EmulateIE9 ,EmulateIE8 ,EmulateIE7
　　　IE9 ,IE8 ,IE7 ,IE5
　　　などの表記が可能

上記を記述することで、互換表示を有効にする事が可能な模様。
でも、試した感じでは<head>タグより前に「DOCTYPE宣言」や「xml宣言」があると、文字の間隔が詰まる現象には効果は無いようです。

もう「W3Cの仕様に沿って、正しい文法でWebページを作ろう」なんて考えない方が良いのかも。。。

サーバーから強制的に互換表示用のヘッダを返す設定もある様だけど、そちらは未確認。

追記終わり。

　

あとがき

過去のIEのWebページレンダリングに関する不具合は、アップデートやパッチで解消された事は殆ど無いので、IE9はずっとこのままなんだろうなぁ。

Webページ制作をしない一般ユーザーとして利用する分には、IE9はかなり魅力的なブラウザです。でもIE9やばいよ。。。。IE6並みにサイト運営者が頭を抱えるブラウザになるんじゃないだろうか。。。。

　

関連エントリー