現在、サイトをXHTML+CSSで構成していくことが主流になりつつあります。
そんな中で、一番のネックになるのが、全てのブラウザは必ずしも正しいCSSを読み込んでくれないということ、つまりバグのないブラウザはないということです。
やっと統一されつつあるものの、ブラウザ独自のものもあって、WEBサイトを構築していく者は、ここに泣かされます。
本来なら、古いブラウザ環境なんか知った事ではない！と思いたいのですが、ユーザビリティーの視点からいくとやはりどのブラウザから見ても、きれいなサイトを表示しないと…と思うのです。
このサイトでも、IE7が出た時点で、IE6は捨てました。
しかし、アクセス解析を見ると、IE6を使っている人がまだ多いのです。
IE6
Firefox
IE7
safari
の順番です。
Macの環境は、家にはないので対応することができませんが…。
そして、それを基本として、IE6用とIE7用のブラウザ環境に合わせたスタイルシートを作成します。
基本のCSSファイルを⇒style.css
style.cssを複製してIE6用のCSSを⇒ie6.css
style.cssを複製してIE7用のCSSを⇒ie7.css
として作成し、ie6.cssはIE6のブラウザ環境でスタイルが崩れている箇所を修正する。
同じく、ie7.cssはIE7のブラウザ環境でスタイルが崩れている箇所を修正。
そして、METAタグに、基本となるCSSをリンクする。
次にIE7用とIE6用のスタイルシートをリンクする。
これで、ブラウザ別にスタイルシートが読み込まれるようになります。
ただし、スタイルが適用されるものの、IE6で見た場合、と画面上に出てしまいます。
私は、基本CSSとIE6用のCSSを入れています。
外のブラウザやバージョンに合わせたい方は、以下の通り。
⇒ネスケ４除外
———————————————————
import.cssの中身
@import “style.css”;⇒ネスケ４除外
———————————————————
ここで問題になるのが、IE7をインストールすると、IE6の環境が分からなくなるという事です。
しかし、IE6とIE７を共存させる方法があります。
IE6とIE7を共存させる方法は以下のサイトで説明されています。