ブラウザの種類によってデザインが異なることは、Web制作者にとってはとてもストレスを感じるものです。特に、IE(Internet Explorer)は顕著で、シェア率の高いブラウザがこんなにサポート対応が遅いことは、疑問を感じるところです。1つバージョンが新しくなっても、初期スタイルが変化してしまってしまい、それまできちっとレイアウトしていたのにも関わらず、IEを新しいバージョンに更新した途端にレイアウトが崩れてしまったことなんて・・。よくあることです。そこで、登場するのがCSSハックと言われるものです。
CSSハックとは、Webサイト作成の際にWebブラウザ間で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つです。(wikipediaより)
CSSハックは使わないことが最良なんですが、そうも言っていられない状況です。閲覧ユーザが、常に新しいバージョンを導入しているわけでもありませんし、今でもバージョンアップをしない古いブラウザを使っているユーザもいるのが現状です。
IE6~8に対するCSSハックをそれぞれ紹介します。
ここでは、p要素に対して文字色を指定する方法で、CSSハックの記述を行います。
すべてのブラウザに対応(通常のスタイル)
まず、通常のスタイルとして指定すると、以下のようになります。
p {
color:blue; /* すべてのブラウザに対応 */
}
IE8以下のバージョンに対応
IE8以下のバージョンに対してスタイルを適用したい場合は、「\9」を値の次に記述します。IE8以下のバージョンであれば文字色を「緑」を指定します。
p {
color:blue; /* すべてのブラウザに対応 */
color:green\9; /* IE8以下のブラウザに対応 */
}
IE7以下のバージョンに対応
IE7以下のバージョンに対してスタイルを適用したい場合は、「*」をプロパティの前に記述します。IE7以下のバージョンであれば文字色を「オレンジ」を指定します。
p {
color:blue; /* すべてのブラウザに対応 */
color:green\9; /* IE8以下のブラウザに対応 */
*color:orange; /* IE7以下のブラウザに対応 */
}
IE6のバージョンに対応
IE6バージョンに対してスタイルを適用したい場合は、「_」をプロパティの前に記述します。IE6のバージョンであれば文字色を「赤」を指定します。
p {
color:blue; /* すべてのブラウザに対応 */
color:green\9; /* IE8以下のブラウザに対応 */
*color:orange; /* IE7以下のブラウザに対応 */
_color:red; /* IE6のブラウザに対応 */
}
CSSハックには、他にもさまざまあるようですが、これらはあくまでもブラウザのバグを利用したものです。それに、ブラウザがバージョンアップすると利用できなくなります。なので、あまり推奨されるものではありません。
【IE用CSSハック】