1. ホーム
  2. css

[解決済み】スタイルシート内でIE(どのバージョンでも)だけをターゲットにするには?

2022-04-08 01:31:07

質問

継承したプロジェクトがあるのですが、全くダメなところがあります。そのうちのひとつがこれです。IE(バージョン問わず)だけをターゲットにしたいのですが。

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

はっきり言って 内部 埋め込みスタイルシートと なし htmlのタグにIDやクラスを追加する場合、ボーダースタイルを適用したい。 のみ ユーザがIEを使用している場合。どうすればいいでしょうか?

編集:Firefox用の解決策を見つけたので、これを反映するために質問を編集しています。

解決方法を教えてください。

Internet Explorer 9 以下 : 条件付きコメントを使って、特にターゲットとしたいバージョン(またはバージョンの組み合わせ)に対してIE固有のスタイルシートを読み込むことができます。

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

しかし、バージョン10からは、IEで条件付きコメントがサポートされなくなりました。

Internet Explorer 10 & 11 : ms-high-contrast を使用してメディアクエリを作成し、その中に IE 10 および 11 固有の CSS スタイルを配置します。ms-high-contrast は Microsoft 固有のもの(IE 10+ でのみ利用可能)なので、Internet Explorer 10 以上でのみ解析されます。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : サポートルールを使用することができます。 このルールに関するすべての情報を含むリンクはこちらです。

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}


インラインルールIE8検出

もう1つ、IE8以下のバージョンしか検出できないオプションがあります。

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

スタイルシートの埋め込みについて、ご指摘の通りです。以下のバージョンでは、メディアクエリと条件コメントが必要だと思います。