サーチ…


備考

これらの「ハック」は、特定のブラウザ/クライアントをターゲットにするために使用されます。上記のラッパーのいずれかにスタイルを適用することで、ブラウザーのレンダリングの違いを回避することができます。

Internet Explorer 10以上の高コントラストモード

Internet Explorer 10+およびEdgeでは、マイクロソフトが-ms-high-contrastメディアセレクタを提供してブラウザからの "High Contrast"設定を公開します。これによりプログラマはサイトのスタイルを適切に調整できます。

-ms-high-contrastセレクタには、 activeblack-on-white 、およびwhite-on-black black-on-white 3つの状態があります。 IE10 +ではこれもnone状態でしたが、Edgeでは今後これがサポートされなくなりました。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
   .header{
      background: #fff;
      color: #000;
   }
}

高コントラストモードがアクティブで black-on-whiteモードになっている場合、ヘッダーの背景が白に、テキストの色が黒に変わります。

@media screen and (-ms-high-contrast: white-on-black) {
   .header{
      background: #000;
      color: #fff;
   }
}

最初の例と同様ですが、これは具体的にはwhite-on-black状態のみを選択し、ヘッダーカラーを白いテキストの黒い背景に反転します。


詳しくは:

-ms-high-contrast上のMicrosoftドキュメント

Internet Explorer 6およびInternet Explorer 7のみ

Internet Explorer 6とInternet Explorer 7を対象にするには、 *プロパティを開始します。

.hide-on-ie6-and-ie7 {
    *display : none; // This line is processed only on IE6 and IE7
}

IE6とIE7では、英数字以外のプレフィックス(ハイフンやアンダースコア以外)は無視されるため、このproperty: valueれていないproperty: valueペアに対して機能しproperty: value

Internet Explorer 8のみ

Internet Explorer 8をターゲットにするには、セレクタを@media \0 screen { }内にラップします。

@media \0 screen {
    .hide-on-ie8 {
        display : none;
    }
}

@media \0 screen { }間はすべてIだけで処理されます

IE6とIE7にインラインブロックサポートを追加する

display: inline-block;

inline-block値を持つdisplayプロパティは、Internet Explorer 6および7ではサポートされていません。これを回避するには、次のようにします。

zoom: 1;
*display: inline;

zoomプロパティは、要素のhasLayout機能をトリガし、Internet Explorerでのみ使用できます。 *displayは、無効なプロパティが影響を受けるブラウザでのみ実行されることを確認します。他のブラウザは単にルールを無視します。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow