IE使用するブラウザでのみ要素をターゲットにするには
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
IE8をターゲットにする方法を知っている人はいますか?
このメソッドを使用するかどうかについて議論するつもりはありませんが、これにより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 */
}
2013アップデート:IE10 +は条件付きコメントをサポートしなくなりました。
元の回答:
一部の人々は混乱しているようです。なぜなら、これは質問の手紙に答えるのではなく、精神だけに答えるからです-そのため、明確にするために:
ブラウザセレクターなどはありません。特定のブラウザーのCSSパーサーのバグやグリッチを利用するハックがありますが、これらに依存していると失敗に陥ります。これに対処するための標準的な一般的な方法があります。
条件付きコメント を使用して、ターゲットIEのみ。
例:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
2つの<!-->
内のすべてはコメントとしてすべての非IEブラウザーによって無視され、IE IE8未満のバージョンはそれをスキップします。IE8以上のみが処理します。2013 update:IE10 +もコメントとして無視します。
これらを見てください:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
(出典: IE8標準モードでのDavid BloomのCSSハック )
このように使用できます。より良い
<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; }
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 */
これは素晴らしい理由です:
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 /
この質問は古代ですが、..
開始タグの直後。
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Body終了タグの直前。
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS ..
#IE8Body #nav li ul {}
条件ステートメントを使用してすべてのIEブラウザ、OR
進化するスレッドの観点から、より完全な答えについては以下を参照してください。
* html .ie6 {property:value;}
または
.ie6 { _property:value;}
*+html .ie7 {property:value;}
または
*:first-child+html .ie7 {property:value;}
@media screen\9 {
.ie67 {property:value;}
}
または
.ie67 { *property:value;}
または
.ie67 { #property:value;}
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
html>/**/body .ie8 {property:value;}
または
@media \0screen {
.ie8 {property:value;}
}
.ie8 { property /*\**/: value\9 }
@media screen\0 {
.ie8910 {property:value;}
}
@media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
@media screen and (min-width:0) {
.ie910{property:value;}
}
_:-ms-lang(x), .ie10 { property:value\9; }
_:-ms-lang(x), .ie10up { property:value; }
または
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
_:-ms-fullscreen, :root .ie11up { property:value; }
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;
}
可能であれば、ブラウザのターゲティングを避けてください。特定した問題を特定して修正します。サポート プログレッシブエンハンスメント および グレースフルデグラデーション 。このことを念頭に置いて、これは実稼働環境で常に取得できるとは限らない「理想的な世界」シナリオです。したがって、上記はいくつかの優れたオプションを提供するのに役立つはずです。
必要な場合にのみ使用する解決策があります。ほとんどのブラウザで有効なhtmlおよびcssを作成した後、Rafael Limaのjavascriptのこの素晴らしい作品を時々ハックします。 http://rafael.adm.br/css_browser_selector/
CSSとHTMLを有効かつクリーンに保ちます。ハックを修正するためにjavascriptを使用するのが理想的なソリューションではないことはわかっていますが、元々コードが可能な限り近い限り(silly IE JavaScriptを使用して数ピクセルを移動することは、一部の人が考えるほど大したことではありません。さらに、時間とコストの理由から、すばやく簡単に修正できます。
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 { .... }
またはもっと悪い!
これは古い質問ですが、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をターゲットにする矛盾が修正されます。
OK、そう、それはCSSハックではありませんが、CSSからIE8をターゲットにする方法を見つけることができないことに対するフラストレーションからです。役に立つかもしれません:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\ 9はfont-familyでは機能せず、代わりに「\ 0 /!important」を使用する必要がありますクリスが上記のように、例えば:
p { font-family: Arial \0/ !important; }
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/