☰

スタイルシート内で IE (任意のバージョン) のみをターゲットにする方法は? [重複] 質問する

tag-icon • tag-icon css internet-explorer
スタイルシート内で IE (任意のバージョン) のみをターゲットにする方法は? [重複] 質問する

継承したプロジェクトがあり、完全に混乱している箇所があります。これはその 1 つです。HTML を変更せず、JavaScript や CSS 以外のテクノロジを使用せずに、IE (任意のバージョン) のみをターゲットにする必要があります。

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

明確に言うと、埋め込まれたスタイルシート内で、HTML のタグに ID やクラスを追加せずに、ユーザーが IE を使用している場合にのみ境界線スタイルを適用する必要があります。どうすればいいでしょうか?

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

ベストアンサー1

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 ルールを使用できます。このルールに関するすべての情報が記載されたリンクはこちらです。

@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 */

埋め込みスタイルシートに指定したとおりです。以下のバージョンでは、メディア クエリと条件付きコメントを使用する必要があると思います。

おすすめ記事