CSS
Internet Explorerのハック
サーチ…
備考
これらの「ハック」は、特定のブラウザ/クライアントをターゲットにするために使用されます。上記のラッパーのいずれかにスタイルを適用することで、ブラウザーのレンダリングの違いを回避することができます。
Internet Explorer 10以上の高コントラストモード
Internet Explorer 10+およびEdgeでは、マイクロソフトが-ms-high-contrast
メディアセレクタを提供してブラウザからの "High Contrast"設定を公開します。これによりプログラマはサイトのスタイルを適切に調整できます。
-ms-high-contrast
セレクタには、 active
、 black-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
は、無効なプロパティが影響を受けるブラウザでのみ実行されることを確認します。他のブラウザは単にルールを無視します。