web-dev-qa-db-ja.com

IEにのみスタイルを適用

これが私の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%にしたい

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

cssinternet-explorer
148
FastTrack

更新2017

環境に応じて、条件付きコメントは公式には廃止され 、IE 10以降で削除されました 。

オリジナル

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

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

スタイルシート内でIEのみをターゲットにできるようにするために使用できる多数のハック（例： アンダースコアハック ）がありますが、すべてのプラットフォームでIEのすべてのバージョンをターゲットにしたい場合は、非常に面倒です。

94
James Allardice
@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のみで解析されます。

207
Himanshu Dwivedi

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; }
}
48
Oriol

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; }
 }
32
Santosh Khalse

条件付きコメントと同様に、CSSブラウザセレクタ http://rafael.adm.br/css_browser_selector/ を使用することもできます。ブラウザ。あなたのCSSを次のように設定することができます

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

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

24
frontendzzzguy

これには少し遅れましたが、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 */
}
6
osouthgate

ベストプラクティスとしては、IE条件文を<head>タグの内側に記述し、その内側にあなたの特別なスタイルシートへのリンクがあるようにします。これはあなたのカスタム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]-->

私が思うようにこれはjames answerとは異なります（私はデザイナーチームと仕事をしていて、私は彼らが私のhtmlファイルに触れてそこに何かをめちゃくちゃにしたくないので個人的な意見）あなたはhtmlファイルにスタイルを含めないでください。

6
elad silver

ようこそ 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>

ObjectBrowserDetect はversion情報も提供するため、特定のクラスを追加できます。 $('*').addClass('ie9'); if (BrowserDetect.version == 9)。

がんばろう....

5
Akash

それは本当に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：アクティブ）、（-ms-high-contrast：なし）{.color {color：＃F00;}}これも有効なCSSを使用していません。

4
Pykler
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

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

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

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

この解決策だけが私のために完璧に機能します。

1
Rahi.Shah