もはや CSS ハックを使用してバグを克服する時代ではないので更新されていません。
Internet Explorer 対策にあてる時間でアニメでも見ましょう。
Internet Explorer 対策にあてる時間でアニメでも見ましょう。
「CSS ハック」とは
現在、様々なバージョンのブラウザーがリリースされていますが、その全てが正しい表示をするわけではありません。最新のプロパティーに対応していなかったりするのはもちろんのこと、特に Internet Explorer 6 には多くのバグが知られています。そんなバグを克服する手段として編み出されたのが、「CSSハック」です。
これは、ブラウザーのバグを逆手に取って、本来は適用されないはずの記述を、特定のブラウザーにのみ適用させるという手法です。 CSSハックを利用することで、他のブラウザーへの影響なくして、特定のブラウザー専用の記述を行うことができるため、レイアウトのズレや、非対応プロパティーへの代替手段の提供などが容易になるのです。
そんなわけで、Webサイトのレガシーブラウザー対応には、もはや必須となったCSSハック。未だ根強い人気を誇る(?)、Internet Explorer 6 などを中心に紹介していきます。
Internet Explorer
Internet Explorer 5 以下
#hack {
/* IE 5 以下 */
color: blue;
voice-family: "\"}\"";
voice-family: inherit;
/* その他 */
color: red;
}
指定されている、"\"}\""
でそのセレクタの読み込みを止めてしまうバグを利用したハックです。セレクタの最後に記述するなど、順番を工夫する必要があります。 Validation では有効な記述です。Tantek Box Model Hack と呼ばれています。
Internet Explorer 6 以下
#hack {
/* IE 6 以下 */
_color: blue;
/* その他 */
color: red;
}
プロパティーの先頭に _
をつけます。アンダースコアハック と呼ばれています。Validation では無効な記述です。