HTML5+CSS3で構築する時のIE8対策メモ

今さらかもしれませんが、HTML5+CSS3で構築したウェブページをIE8でも期待通りに表示・印刷されるためのメモ。

Win7+IE8で確認しています。ちなみにIE9の開発者モードでは再現しませんので、ご注意ください。

html5.js ファイル

HTML5でウェブページを作成する場合、IE8以下への対策として html5.js を

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

と埋め込んでいたけど、これだとIE8で印刷しようと思うと、<header>などHTML5タグ部分が正常にレンダリング（印刷）されません。

対策：プロジェクトのページ（Google Project Hostingのhtml5shiv）から js ファイルをダウンロードして使いましょう

通常は「html5shiv.js」のみで大丈夫ですが、印刷まで期待通りにしたいのであれば「html5shiv-printshiv.js」使いましょう（これのみでOK）。

参考にしたサイト（理由等も詳しく説明されてあります）

• HTML5でのIE対応 : html5shiv | 9142.NET.

CSS3のグラデーション

IEのCSS3の対応はひどい物なのですが（苦笑）、まぁ角丸やグラデーションなど多少対応されなくても影響が出ないものはよく使います（プログレッシブ・エンハンスメントってやつです）。

ところがグラデーションやアルファなど、IE対策として filter を使っている要素に、メイリオなどアンチエイリアスのかかるフォントでテキストが載っていると、見事にアンチエイリアスが外れます。やっかいか事に filter のかかっている要素の子要素全てに影響が出ます。

対策：どうにも気になる時はグラデーションの画像を使う事

参考にしたサイト（スクリーンショット付きで説明されてあります）

• CSS3の足を引っ張るIEに悩む / 35歳からのWEB遊びブログ.

以上、メモにオチなし。