web-dev-qa-db-ja.com

特定のIEブラウザに対してのみCSSを設定するにはどうすればよいですか？

CSS/jQuery Checkboxスタイルのスクリプトがあります： http://jsfiddle.net/BwaCD/

問題は、現在のブラウザでは、スパンが入力上で浮動するためには、入力の位置が絶対位置でなければならないということです。しかし、IE8以下ではスクリプトが機能しないため、他の要素の上に浮かんでいるだけの絶対位置の入力が残ります。このスクリプトがIE8以下で動作するように求めているのではありません。

IE8以下の場合、CSSを使用して特定のスタイルを設定する方法を知りたいです。必要に応じてjQueryを使用できると思いますが、そうは思いません。私はこれがCSSとHTMLだけでできることを知っています。

cssinternet-explorerinternet-explorer-8internet-explorer-7internet-explorer-6
10
henryaaron

どのようにそのことについて？

http://www.quirksmode.org/css/condcom.html

または、それらのステートメントが気に入らない場合

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/ =

10
Adaz

条件付きコメントは機能します（<!--[if lte IE 8]><stylesheet><![endif]-->）ですが、すべてスタイルシートで実行したい場合は、 方法です ：

body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE only */  
}

ここで重要なのは「\ 9」で、正確に「\ 9」である必要があります。これがなぜなのか正確にはわかりません。

編集：\ 9ハックだけでは十分ではありません。 IE9を除外するには、 :rootハック ：

:root body {
    color: red\9; /* IE9 only */  
}

IE以外のブラウザは:root、IE9をターゲットに使用している場合は、\ 9ハックと組み合わせます。

15
Brilliand

Internet Explorerの条件付きコメントを使用して、古いIEブラウザのHTMLルートタグにクラス名を追加できます。

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

次に、次のように適切なクラス名を参照してIE固有のCSSを定義できます。

.ie8 body {
   /* Will apply only to IE8 */
}

出典： http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-n both /

3
Peter O.

http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575

例では：color : green\9;

\9はie11では機能しませんでしたが、\0うまくいきました！

2
Tom Brito

IEのすべてのバージョンをターゲットにする：

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

IE以外のすべてをターゲティングする

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

ターゲットIE 7のみ

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

ターゲットIE 6のみ

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

ターゲットIE 5のみ

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

ターゲットIE 5.5のみ

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

ターゲットIE 6以下

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

ターゲットIE 7以下

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

ターゲットIE 8以下

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

ターゲットIE 6以上

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

ターゲットIE 7以上

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

ターゲットIE 8以上

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
2
Lucky

IE 10 and 11の便利な解決策があります。スクリプトはIEとバージョンを確認し、.ie10または.ie11クラスをタグに追加します。

そうすることで、.ie10 .something {}のような特定のルールを記述でき、ブラウザーがIE 10または11の場合にのみ適用されます。

それをチェックしてください、いくつかの商用サイトでテストされており、実際にハッキングされていない、優雅な劣化に役立ちます： http://marxo.me/target-ie-in-css

1
marxo

私はInternet Explorerのグラブカーソルをこのように解決しました：

.grab_cursor {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

バージョン8以前のWindows用Internet Explorerでは、相対URI値が外部スタイルシートファイルで指定されている場合、ベースURIは要素を含むドキュメントのURIであり、スタイルシートのURIではないと見なされます。宣言が表示されます。

ファイルツリー：

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

良い参照：

0
Riccardo Volpe