Webtech Walker

IE8 Beta1を早速使ってみた

IE8 Beta1が公開されていたので使ってみました。

Acid2テスト

Acid2テストはクリアしていると聞いているので早速試してみることに。

おっ!ちゃんとでたー!

IE8でのAcid2テストの結果

ちなみに最近公開されたAcid3テストの結果は17点でした。(Win Firefox2・・・50点、Win Opera 9.26・・・47点)

CSSセレクタの対応

CSSのセレクタで、IE7で対応していなかったものを中心にいくつか試してみました。

セレクタ 対応
:before
:after
:lang()
:first-letter ×
:first-line ×
:root ×
:first-child
:last-child ×
:disabled ×
:enabled ×
:disabled ×

どうやらCSS3の先行実装は今のところほとんどないようです。:last-childとか:checkedとかに対応してなかったし、CSS3から定義されている、擬似要素での「::」にも対応していないようでした。(p::after とか)

なぜかIE6、IE7で対応していたはずのfirst-letterとfirst-lineがダメでした。後述するレンダリングモードの切り替えでIE6モード、IE7モードにると対応しているみたいでした。謎です。この辺りは正式版までには直るかな?

hasLayoutプロパティ

たしかIE8からhasLayoutプロパティはなくなったんですよね。とりあえずこの前書いた、hasLayoutプロパティがtrueのとき起こるバグは直ってるみたいです。

hasLayoutプロパティがないということは、clearfix的なものに指定しているIE用の下記スタイルは意味がなくなります。

.clearfix {
  zoom: 1;
}

検証の結果、上記スタイルではclearfixの動作にはなりませんでした。いいですね。hasLayoutプロパティによるclearfixが使用できない代わりに、:after擬似要素が使えるのでモダンブラウザ用の下記スタイルは反映されます。contentプロパティにも対応しているのを確認できました。

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

レンダリングモードの切り替え

下記ソースをhead内に記述することでレンダリングモードが切り替わるみたいです。(HTTPヘッダでの指定でも切り替わるようですけど未検証です)

IE6以前のモード

<meta http-equiv="X-UA-Compatible" content="IE=6" />

IE7モード

<meta http-equiv="X-UA-Compatible" content="IE=7" />

モードを切り替えたとき、clearfixがhasLayoutプロパティと:afterのどちらで動作しているかを検証しました。。IE8モードはmetaタグによる指定が無い状態です。

  IE6モード IE7モード IE8モード
:after × ×
hasLayout ×

いいですね。予想通りの結果です。

次に、各レンダリングモードでのハックの対応を検証しました。

ハック IE6モード IE7モード IE8モード
*html × ×
アンダースコアハック × ×
*+html ×
*:first-child+html ×

IE8モードでIE7用のハックが反映される・・・ダメじゃね?とりあえず正式版までに直るのを期待ですね。

終わり

とりあえず簡単に試してみましたけど、IE7からはだいぶよくなったかなという感じです。後は新たなバグが出ないことを祈るのみ・・・

このエントリーをはてなブックマークに追加