34

HTML 内で IE の条件付きコメントを使用できることはわかっています。

<!--[if IE]>
  <link href="ieOnlyStylesheet.css" />
<![endif]-->

しかし、 stylesheetで IE のみをターゲットにして、html 内の特定の要素に css ルールを設定したい場合はどうすればよいでしょうか。たとえば、この Chrome/Safari ハックを css ファイル内で css コードとして使用できます...

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
}

しかし、次のように CSS スタイルシート内で IE ハックを使用します。

 <!--[if IE]>
      .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
 <![endif]-->

動作しません。IE のみをターゲットにするには、スタイルシート内で何を使用すればよいですか?

4

6 に答える 6

27

条件付きコメントは、スタイルシート内では機能しません。代わりに、HTML で条件付きコメントを使用して、さまざまな CSS クラスまたは ID を要素に適用し、それらを CSS でターゲットにすることができます。

例えば：

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

また、非常によく似た方法 (要素にクラスを追加すること)で機能検出を行うModernizrなどのツールもあります。<html>これを使用して、古いブラウザーをサポートしながら、新しいブラウザー用にデザイン/スクリプトを段階的に強化できます。

于 2012-07-28T18:56:35.967 に答える
4

IE の条件付きコメントは使用できませんが、ハックは使用できます。この CSS ハックのページでは、使用できる IE ハック (およびその他) について説明します。

于 2012-07-28T18:43:24.703 に答える
0

他のブラウザの場合と同じように、スタイルシートのすべてのスタイルを設定します。通常のスタイルシートをページにインポートした後、通常の<!--[if IE]>条件付きステートメントを使用してIE固有のスタイルシートをインポートします。

この方法に従うと、すべてのブラウザーのスタイルがインポートされ、IE固有のスタイルを使用して、互換性がない、正しくレンダリングされない、またはIEで使用するために調整する必要があるスタイルがオーバーライドされます。

于 2012-07-28T19:10:01.473 に答える