February 16, 2009

CSSハック

ブラウザによって表示が異なる

今の世の中、インターネットを見るために使うブラウザは様々です。Internet Explorer、Safari、Firefox、Opera、Google Chromeなどがあります。当然ながら、そのバージョンも様々です。全ブラウザに同じ表示をするようにマークアップするのは疲れます。

ただ、Webサイトがブラウザによって表示が異なってしまうというのはとても残念な結果です。こういった時はCSSハックをして、指定したブラウザのみを調節していきます。

今回はInternet Explorer についてのみです。

Internet Explorer の CSSハック

Internet Explorer 6 以下の場合

Internet Explorer 7 のみの場合

Internet Explorer 8 のみの場合

番外編として

XHTMLに書き込む方法 (Internet Explorer 6 の場合)

XHTMLに書き込む方法 (Internet Explorer 7 の場合)

直接HTMLの<head>タグに書き込む方法です。これによってユーザーが使っているブラウザで適用させるCSSを変更させることができます。

他にも javascript を使って対処することもできるみたいです。
簡単にブラウザ別CSSを導入するJavaScript (CSS Browser Selector)