web-dev-qa-db-ja.com

IE8 CSSセレクター

IE使用するブラウザでのみ要素をターゲットにするには

IE6:

* html #nav li ul {
    left: -39px !important;
    border: 1px solid red;
}

IE7:

*+html #nav li ul  {
    left: -39px! important;
}

IE8をターゲットにする方法を知っている人はいますか?

45
Chris

このメソッドを使用するかどうかについて議論するつもりはありませんが、これによりIE8-9専用の特定のcss属性を設定できます(注:セレクターではないので、あなたとは少し異なります質問):

各css宣言の後に「\ 0 /」を使用します。

#nav li ul  {
  left: -39px\0/ !important;
}

そして、別の答えを構築するために、これを実行してIE6、IE7、およびIE8にさまざまなスタイルを割り当てることができます。

#nav li ul  {
   *left: -7px    !important; /* IE 7 (IE6 also uses this, so put it first) */
   _left: -6px    !important; /* IE 6 */
    left: -8px\0/ !important; /* IE 8-9 */
}

ソース: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

84
Nick

2013アップデート:IE10 +は条件付きコメントをサポートしなくなりました。

元の回答:

一部の人々は混乱しているようです。なぜなら、これは質問の手紙に答えるのではなく、精神だけに答えるからです-そのため、明確にするために:

ブラウザセレクターなどはありません。特定のブラウザーのCSSパーサーのバグやグリッチを利用するハックがありますが、これらに依存していると失敗に陥ります。これに対処するための標準的な一般的な方法があります。

条件付きコメント を使用して、ターゲットIEのみ。

例:

<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->

2つの<!-->内のすべてはコメントとしてすべての非IEブラウザーによって無視され、IE IE8未満のバージョンはそれをスキップします。IE8以上のみが処理します。2013 update:IE10 +もコメントとして無視します。

75
Rex M

これらを見てください:

/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }

/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }

(出典: IE8標準モードでのDavid BloomのCSSハック

26
Gumbo

このように使用できます。より良い

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  /><![endif]-->
-------------------------------------------------------------

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
  <!--[if !IE]>--> <body> <!--<![endif]-->

div.foo {color:inherit;} .ie7 div.foo {color:#ff8000; }

14
image72

Image72の優れた答えに基づいて、実際には次のような高度なCSSセレクターを使用できます。

<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->

あなたのCSSでこれを行うことができます:

.notIE   .foo { color: blue;   } /* Target all browsers except IE */
.IE9up   .foo { color: green;  } /* Taget IE equal or greater than 9 */
.IE8     .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red;    } /* Target IE equal or less than 7 */

.IE8 .foo, .IE9 .foo {
    font-size: 1.2em;            /* Target IE8 & IE9 only */
}

.bar { background-color: gray; } /* Applies to all browsers, as usual */

/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none;  } /* Any browser except IE */
.IE    #betterBrowser { display: block; } /* All versions of IE */

これは素晴らしい理由です:

  • 完全に標準に準拠しています(い/危険なCSSハッキングはありません)
  • 個別のスタイルシートを用意する必要はありません
  • IEの任意のバージョンおよび複雑な組み合わせを簡単にターゲットにできます
11
MrFusion

IE8専用のCSSスタイル:

.divLogRight{color:Blue; color:Red\9; *color:Blue;}

IE8のみが赤になります。

最初の青:すべてのブラウザー用。

赤:IE6,7,8のみ

セカンドブルー:IE6,7のみ


赤= IE8のみ。

ブラウザハッキング(Internet Explorer(IE)、Safari、Chrome、iPhone、Operaを含む)の完全な概要については、次のリンクを参照してください。 http://paulirish.com/2009/browser-specific-css-hacks /

11
SirMoreno

この質問は古代ですが、..

開始タグの直後。

<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->

Body終了タグの直前。

<!--[if gte IE 8]>
</div>
<![endif]-->

CSS ..

#IE8Body #nav li ul {}

条件ステートメントを使用してすべてのIEブラウザ、OR

11
anon

進化するスレッドの観点から、より完全な答えについては以下を参照してください。

IE 6

* html .ie6 {property:value;}

または

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

または

*:first-child+html .ie7 {property:value;}

IE 6および7

@media screen\9 {
    .ie67 {property:value;}
}

または

.ie67 { *property:value;}

または

.ie67 { #property:value;}

IE 6、7、および8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

または

@media \0screen {
    .ie8 {property:value;}
}

IE 8標準モードのみ

.ie8 { property /*\**/: value\9 }

IE 8,9および10

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9のみ

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9以降

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9および10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10のみ

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10以降

_:-ms-lang(x), .ie10up { property:value; }

または

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11(以降)

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascriptの代替

Modernizr

Modernizrは、ページの読み込み時に迅速に実行され、機能を検出します。次に、結果を含むJavaScriptオブジェクトを作成し、html要素にクラスを追加します

ユーザーエージェントの選択

Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

以下をhtml要素に追加します(例):

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

非常にターゲットを絞ったCSSセレクターの許可、例:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

脚注

可能であれば、ブラウザのターゲティングを避けてください。特定した問題を特定して修正します。サポート プログレッシブエンハンスメント および グレースフルデグラデーション 。このことを念頭に置いて、これは実稼働環境で常に取得できるとは限らない「理想的な世界」シナリオです。したがって、上記はいくつかの優れたオプションを提供するのに役立つはずです。


帰属/エッセンシャルリーディング

4
SW4

必要な場合にのみ使用する解決策があります。ほとんどのブラウザで有効なhtmlおよびcssを作成した後、Rafael Limaのjavascriptのこの素晴らしい作品を時々ハックします。 http://rafael.adm.br/css_browser_selector/

CSSとHTMLを有効かつクリーンに保ちます。ハックを修正するためにjavascriptを使用するのが理想的なソリューションではないことはわかっていますが、元々コードが可能な限り近い限り(silly IE JavaScriptを使用して数ピクセルを移動することは、一部の人が考えるほど大したことではありません。さらに、時間とコストの理由から、すばやく簡単に修正できます。

4
Ammi J Embry

ASP.NETの世界では、組み込みのBrowserCaps機能を使用して、ブラウザーとプラットフォームの任意の組み合わせをターゲットにできるクラスのセットをbodyタグに書き出す傾向がありました。

したがって、事前レンダリングでは、次のコードのようなものを実行します(タグにIDを与え、サーバーで実行することを想定しています)。

HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);

このコードにより、CSSの特定のブラウザーを次のようにターゲットできます。

.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }

System.Web.UI.MasterPageのサブクラスを作成し、すべてのマスターページが専用のMasterPageから継承されるようにして、すべてのページがこれらのクラスを無料で追加できるようにします。

ASP.NET環境を使用していない場合は、ページの読み込み時に同様のクラス名を動的に追加するブラウザープラグインを持つjQueryを使用できます。

この方法には、マークアップから条件付きコメントを削除し、メインスタイルとブラウザー固有のスタイルの両方をCSSファイルのほぼ同じ場所に保持するという利点があります。また、CSSは将来の使用に耐える(修正される可能性のあるバグに依存しないため)ことを意味し、CSSコードを見るだけで済むため、CSSコードの意味を理解しやすくなります。

.IE8 #container { .... }

の代わりに

* html #container { .... }

またはもっと悪い!

4
jonsidnell

これは古い質問ですが、Googleで検索した最初の結果であり、最高ランクの提案やOPの選択よりも優れたソリューションを見つけたと思います。

#nav li ul:not(.stupidIE) { color:red }

技術的には、これはOPが望んだことの反対ですが、IE8に必要なルールを最初に適用してから、他のすべてに適用する必要があることを意味します。もちろん、実際に何も選択しない有効なcssであれば、()内に何でも入れることができます。 IE8はこの行にチョークをかけて適用しませんが、以前のIE(IE7のみをチェックし、IE6のことは気にしませんでした)で、:not()を無視して宣言を適用します。そしてもちろん、他のすべてのブラウザー(Safari 5、Opera 10.5、Firefox 3.6)をテストしました)は、期待どおりにCSSを適用します。

したがって、このソリューションは、他の純粋なCSSソリューションと同じように、IE開発者が:notセレクタのサポートを追加すると、IE8をターゲットにする矛盾が修正されます。

3
Moss

OK、そう、それはCSSハックではありませんが、CSSからIE8をターゲットにする方法を見つけることができないことに対するフラストレーションからです。役に立つかもしれません:

if (jQuery.browser.version==8.0) {
   $(results).css({
         'left':'23px',
         'top':'-253px'
      });
}
2
Zeljko Dakic

\ 9はfont-familyでは機能せず、代わりに「\ 0 /!important」を使用する必要がありますクリスが上記のように、例えば:

p { font-family: Arial \0/ !important; }
1
Ricardo Zea

IE8用のセレクターハックはありません。この問題に最適なリソースは http://browserhacks.com/#ie です

特定のIE8をターゲットにしたい場合は、htmlでコメントを行う必要があります

<!--[if IE 8]> Internet Explorer 8 <![endif]-->

または、次のような属性ハックを使用できます。

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

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

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

このチェックの詳細については、 http://www.paulirish.com/2009/browser-specific-css-hacks/

0
fernandopasik