スタイルシートの罠を回避する

Mid Pass Filter

これは、IE5.xのみに適応させるスタイルシートを別に作成する方法です。

基本となるスタイルシートはbase.cssに記述し、IE5.xの不具合を回避するためのスタイルシートをie5win.cssに記述します。本来なら不要なバグ対策のスタイルシートを別のファイルに記述することでbase.cssはクリーンな状態を保っておくことができます。

このように記述したimport.cssをHTMLファイルでリンクします。

@import "base.css";

@media tty {
 i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
 }/* */

http://tantek.com/CSS/Examples/midpass.html

    Top

シンプル（バックスラッシュ）版

バックスラッシュ(\)を使った回避方法です。

\で始まるプロパティはIE5.xとモダンブラウザが読み込めます。間に\が入ったプロパティはモダンブラウザのみが読み込むことができます。これを利用して両方のブラウザに適切な数値を読み込ますことができます。

ただし、この方法には落とし穴があります。Opera5やNN4がこの回避方法を用いたスタイルシートを読み込むと、すべてのスタイルを無視してしまいます。このような場合、それらのブラウザにはこのスタイルシートを読み込ませないようにする必要があります。

#mybox {
  width:350px;			/* Opera用の横幅 */
  \width:380px;			/* IE5.x用の横幅 */
  w\idth:350px;			/* モダンブラウザ用の横幅 */
  border: 5px solid #00FF00;
  padding: 10px;
  margin: 5px;
  }
    Top

Box Model Hack

※IE5.00.3700.1000で確認したところ、この対策を施すとvoice-familyプロパティ以下のすべてのスタイルを読み込むことができなくなりました(IE5.5では正常)。シンプル版を用いることをお勧めします。ここでは、このような対策もあるということで説明しておきます。

voice-familyプロパティを使った回避方法です。

IE5.xではこのプロパティをうまく読み込むことができないため、voice-familyプロパティの直前にIE5.x用のスタイルシートを記述し、後ろにモダンブラウザ用のスタイルシートを記述します。

IE5.xは、voice-familyプロパティ以下のプロパティを読み込めないため、[width:365px]で#myboxのスタイルはここで読み込みを終了します。モダンブラウザは、一度 IE5.x用の数値[width:365px]を読み込みますが、再度[width:350px]を読み直します。これにより、両方のブラウザに適切な数値を読み込ますことができます。

IE5.x用の横幅＝モダンブラウザ用の横幅＋（[padding]＋[border]）×2

#mybox {
  border: 5px solid #00FF00;
  padding: 10px;
  margin: 5px;
  width:380px;			/* IE5.x用の横幅 */
  voice-family: "\"}\"";
  voice-family:inherit;
  width:350px;			/* モダンブラウザ用の横幅 */
  }

http://www.tantek.com/CSS/Examples/boxmodelhack.html

    Top

Opera対策

※Opera6.12で確認したところこの対策を施さなくても、Box Model Hack、またはシンプル版でOperaはモダンブラウザ用の数値を読み込むことができました。ここでは、このような対策もあったということで説明しておきます。

Operaもvoice-familyプロパティをうまく読み込むことができません。そのため、上のBox Model Hackの方法を使ってしまうと、OperaもIE5.x用の値しか読み込むことができません。そのため、Opera用に#myboxのスタイルを再度設定します。

html>bodyは、CSS2でサポートされる子セレクタです。古いブラウザではCSS2を理解することができないため、このスタイルを読み込むことはできません。子セレクタは、Opera以外にNNなどのブラウザでも読み込むことができますが、IE6.xでは読み込むことができません。Box Model Hackと併用することでOpera対策となります。

#mybox {
  padding: 10px;
  margin: 5px;
  width:365px;			/* IE5.x用の横幅 */
  voice-family: "\"}\"";
  voice-family:inherit;
  width:350px;			/* モダンブラウザ用の横幅(実際はIE6.x用) */
  }

html>body #mybox {
  width:350px;			/* Opera用の横幅 (実際はIE6.x以外のモダンブラウザ用)*/
  }
    Top

ファイル更新日：2005年08月17日