CSSハックや条件分岐コメントを一切使わずスマートにIE対策を行う唯一の方法
2013/12/14
WebサイトのHTML・CSSコーディングをしていると必ずといっていいほど問題が発生するIEですが、皆さんはどう対処していますか？
一般的にはスタイルシートにCSSハックを記述する方法、またはHTMLの条件分岐コメントでIE用のスタイルシートを読み込むのが一般的かと思います。
従来のIE対策の問題点
従来のIE対策の一番の問題点はソースコードが煩雑になることでしょうか。
私の場合、CSSハックが必要になるのはIE6、7ぐらいなのであまり問題はないのですが、IE8以降のCSSハックが必要になった場合、ソースコードはだいぶ読み難くなります。
その他の問題点としては、一部のCSSハックはバリデータを通らない、条件分岐コメントはHTMLに余計なソースコードを埋め込まないといけない（IE10では廃止）などが挙げられます
HTMLもCSSもクリーンな状態でIE対策を行う唯一の方法
以下の方法を使えばHTMLとCSSをクリーンな状態に保ったままIE対策が可能です。さらに従来の方法よりも柔軟な指定が可能です！
その方法とは下記のスクリプトを読み込むだけ！
（ie_class.jsはjQueryより後に読み込んでください）
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="ie_class.js"></script>
スクリプトが読み込まれると、下記のようにhtml要素にIE用のクラスが設定されるので後は自由にスタイルを記述してください！（IE10でアクセスした場合の例です。IE6以上で確認済みです。）
<html class="ie ie10" xmlns="http://www.w3.org/1999/xhtml">
/* すべてのIEに適用 */
html.ie #hoge { ... }
/* 特定のIEに適用 */
html.ie10 #hoge { ... }
一応デモページを作りました。参考にしてみてください（アクセスするIEのバージョンで内容が変わります）。改変は自由にしていただいてOKです。
以上です。
参考になりましたらシェアしていただけますと嬉しいです！