IEでのみスタイルを適用

184

これが私のCSSブロックです：

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

IE 7、8、および9のみを「表示」したい width: 100%

これを達成する最も簡単な方法は何ですか？

css  internet-explorer 
— FastTrack
ソース
1
なぜこれをやろうとしているのですか？どのバージョンのIEをターゲットにしていますか？IE10はどうですか？（通常の条件付きコメントはサポートされていません）
— thirtydot
私はIE 7、8、および9ターゲットにしようとしている
— FastTrackの
IE9ではなく IE9をターゲットにする必要があるのはどのような理由ですか？私は知りたいのですが...
— thirtydot
1
IEはwidth: auto、FirefoxやChromeなどの他のブラウザーと同じ方法でブロック要素を解釈しません。Chrome / Firefoxではwidth:auto、ブロック要素の幅をそのコンテナの全幅に拡張します。IEはこれを行わず、必要ですwidth: 100%
— FastTrack
1
誰かがこれを試しましたか？philipnewcomer.net/2014/04/target-internet-explorer-10-11-css
— Pramesh Bajracharya

回答:

102

2017年の更新

環境によっては、IE10 + では条件付きコメントが正式に非推奨になり、削除されました。

元の

最も簡単な方法は、HTMLでInternet Explorerの条件付きコメントを使用することです。

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

スタイルシート内のIEのみをターゲットにできるハック（アンダースコアハックなど）は多数ありますが、すべてのプラットフォームですべてのバージョンのIEをターゲットにすると非常に面倒になります。

— ジェームズ・アラディス
ソース
10
CSSファイル内でその条件付きコメントを使用する方法はありますか？私がそれを助けることができれば、HTMLが乱雑になるのを避けたかったのです。
— FastTrack
2
@FastTrack-いいえ、条件付きコメントはHTMLコメントであるため、マークアップに表示する必要があります。私はIE専用のまったく新しいスタイルシートを作成し、それを通常どおり条件付きコメント内に含める傾向があります。
— James Allardice
ジェームズ：これを行うことを考えていましたが、何かを変更したいときはいつでも、2つの個別のスタイルシートを更新する必要があります。
— FastTrack
3
@FastTrack-いいえ、IEスタイルシートにはIEに固有のスタイルのみが含まれます。必要に応じてメインスタイルシートに設定されたスタイルを上書きできるように、メインスタイルシートの後にそれを含めます。したがって、IEに固有の何かを変更する場合にのみ、更新する必要があります。
— James Allardice
1
@FastTrack-はい。複数のスタイルシートで何かが指定されている場合は、後で含まれているものが優先されます。
— James Allardice
284 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

説明：これは、Microsoft固有のメディアクエリです。Microsoft IE固有の-ms-high-contrastプロパティを使用すると、Internet Explorer 10以降でのみ解析されます。メディアクエリの両方の有効な値を使用したので、ユーザーがハイコントラストを有効にしているかどうかに関係なく、IEでのみ解析されます。

— ヒマンシュドウィヴェディ
ソース
6
新しいインターネットエクスプローラー（エッジ）では機能しないため、msなしでも追加する必要があります
— Saad Ahmed
6
ターゲットエッジについては、こちらをご覧ください：stackoverflow.com/questions/28417056/…–
— Phyllis Sutherland
6
@SaadAhmed：それは実際に問題ですか？Edgeは適度に動作するブラウザであり、とにかくIEよりもはるかに優れているので、IEハックの多くはおそらく必要ないでしょう（または賢明ではないでしょう）。
— Michael Scheper
1
まあそれは私の愚かなIEの問題を解決しました。修正をありがとう！
— ジェスター
1
@MichaelScheper最初のコメントに投稿されたこのバグは、最新のエッジ（今日は17）にも適用されます。Saadの小さな修正により、この癖を取り除くことができました。
— SimonRabbit 2018
54

IEの条件付きコメントとは別に、これはIE6をIE10にターゲティングする方法の最新リストです。

IE以外の具体的なCSSとJSハックをご覧ください。

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}
— オリオール
ソース
1
私が試したんだ\9と\0/用displayクラスセレクタで、どちらもうまくとしてIE10に適用されます。IE9のみに適用する方法はありますか？
— トム・ブリト
あなたは試すことができます：\0/IE9しかしそれをテストしていません。あなたは条件節を使用しない限り、そうでなければ私はIE9を対象とする他の方法を知らない：<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
— オリオール
1
この@media screen and (min-width:0\0) {ハッキングはIE11でも解析されているようです。9と10だけではないので、コメントを再確認して更新してください。
— Rolf
@media screenと（-ms-high-contrast：active）、（-ms-high-contrast：none）を使用しました{}うまくいきました。
— Harsimer、
43

IEで利用可能ないくつかのハックがあります

スタイルシートでの条件付きコメントの使用

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

ヘッドセクションのCSSでの条件付きコメントの使用

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

HTML要素での条件付きコメントの使用

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

メディアクエリの使用

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }
— サントシュ・カルセ
ソース
最後にリストされた（min-width:0\0）はIE11にも適用されることに注意してください
— CBarr
26

条件付きコメントだけでなく、CSS Browser Selector http://rafael.adm.br/css_browser_selector/を使用することもできます。これにより、特定のブラウザーをターゲットにできるようになります。次に、CSSを次のように設定できます。

.ie .actual-form table {
    width: 100%
    }

これにより、条件付きコメントを必要とせずに、メインスタイルシート内の特定のブラウザーをターゲットにすることもできます。

— フロントエンド
ソース
これはIE9では効果がないようです
— FastTrack
なぜかわかりません。CSSで.ie9 .actual-form table {width：100％}を試してください。うまくいけばうまくいきます。
— frontendzzzguy
.ie92010
— Hanna
これは間違いなく最もエレガントなアプローチです。個人的には、ページをレンダリングするときにブラウザーのCSSセレクターをサーバー側に追加することを好みます。
— opsb 2013
1
これは、エージェント文字列を使用し、セレクタークラスを本体に動的に追加する場合に機能します。
— ピカピカ2016年
6

ベストプラクティス<head>として、特別なIE スタイルシートへのリンクを含むIE条件ステートメントをタグ内に記述する必要があると思います。これは、する必要があり、それは後者を優先しますので、私はすべてのページに同じすなわちCSSを使用して、私は小さなサイトを持って、あなたのカスタムCSSリンクの後に。

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

これは私が思うジェームズの回答とは異なります（デザイナーのチームと協力していて、HTMLファイルに手を触れて何かを台無しにしたくないので個人的な意見です）、HTMLファイルにスタイルを含めないでください。

— eladシルバー
ソース
6

これは少し遅いですが、IE6＆7の背景を非表示にしようとすると、これは完璧に機能しました

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

私はこのハックを手に入れました：http : //briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}
— オスゲート
ソース
5

Welcome BrowserDetect-素晴らしい機能。

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

Object BrowserDetectversionは、特定のクラスを追加できるように情報も提供します（例:)。$('*').addClass('ie9');の場合(BrowserDetect.version == 9)。

幸運を....

— アカシュ
ソース
4

それは本当にIEのバージョンに依存します...私はIE6-10から最新であるこの優れたリソースを見つけました：

Internet Explorer 6のCSSハック

これはStar HTML Hackと呼ばれ、次のようになります。

  • html .color {color：＃F00;}このハックでは、完全に有効なCSSを使用しています。

Internet Explorer 7のCSSハック

スタープラスハックと呼ばれています。

*：first-child + html .color {color：＃F00;}またはより短いバージョン：

* + html .color {color：＃F00;}スターHTMLハックのように、これは有効なCSSを使用します。

Internet Explorer 8のCSSハック

@media \ 0screen {.color {color：＃F00;}}このハッキングでは有効なCSSを使用していません。

Internet Explorer 9のCSSハック

：root .color {color：＃F00 \ 9;}このハッキングも有効なCSSを使用していません。

2013.02.04を追加：残念ながらIE10はこのハックを理解しています。

Internet Explorer 10のCSSハック

@media screenと（-ms-high-contrast：active）、（-ms-high-contrast：none）{.color {color：＃F00;}}このハッキングも有効なCSSを使用していません。

— ピクラー
ソース
最後の1つはIE11にも適用されます
— CBarr
2

/ * Internet Explorer 9以降（ワンライナー）* /

_::selection, .selector { property:value\0; }

このソリューションだけが完全に機能します。

— ラーヒ・シャー
ソース
私はこれがネクロコメントであることを知っていますが、これは非常に滑らかに見えます。ただし、少し難解でビザンチンに見えるので、正確に何をしているのかわかりません。誰もがこの声明の意味を知っていますか？（_ ::と最後の\ 0のように？）
— アダムR.ターナー
1
Chromeにもルールを適用します：/
— trincot
2 
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}
— dxc111
ソース
2

IE9 +の場合

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE Edge 12以降

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

これはEdgeとすべてのIEで動作します

:-ms-lang(x), .selector { color: red; }
— スリニバサンN
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.