IEとの戦い
初めて本格的にIE対応をしなければならない機会があり、IE6まで対応すべく激闘しておりました。
IE6に至ってはpngの透過画像を透過してくれないなど、予想以上に悲惨な状況であり、多くのエンジニアがIE糞と言っている理由がよくわかりました。
IE6対策PNG透過表示最強スクリプト｜DD_belatedPNG.js ｜ フリーランスWebデザイナーの仕事
IE対応するにあたって必要な基本事項をまとめておきます。
1. html5shiv
これは必須です。
HTML5から新しく加わったheaderやsectionといったタグは、古いIEでは認識されないためレイアウトが著しく崩れてしまいます。古いIEに対してもこうしたタグを認識させるライブラリがhtml5shivです。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2. DOCTYPE
IE6ではhtmlの最初でDOCTYPE宣言をしない場合、後方互換モードでレンダリングしてしまい、意図せぬレイアウトの崩れをもたらす場合があります。
しっかりとDOCTYPEの宣言をしましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. 入れ子要素でmarginを重ねるのではなく、paddingを使おう
モダンブラウザであれば問題ないのですが、入れ子要素を作った際に親と子の両方にmarginを適用しようとすると「marginの相殺」なる問題が発生し、古いブラウザではレイアウトが崩れてしまいます。
対策として、入れ子要素を作って子要素の位置を調整したい場合はmarginではなくpaddingによって調整するのが得策といえます。
(その他メモ)
Chromeのデベロッパーツールで便利な機能を見つけました。
右クリック→要素の検証→虫眼鏡マークをクリック→調べたいところをクリック
こいつを使えばページを見ながら各要素のソースコードをレビューすることができます。お手本とするサイトのソースコードがどうなっているのかチェックするときに便利！
