web-dev-qa-db-fra.com

Comment puis-je définir CSS uniquement pour des IE les navigateurs?

J'ai un script de style CSS/jQuery Checkbox: http://jsfiddle.net/BwaCD/

Le problème est que, dans les navigateurs actuels, pour que l'étendue flotte au-dessus de l'entrée, la position de l'entrée doit être absolue. Mais dans IE8 et ci-dessous, le script ne fonctionnera pas et, par conséquent, il me reste une entrée absolument positionnée qui flotte au-dessus d’autres éléments. Je ne demande pas que le script fonctionne dans IE8 et les versions antérieures.

Je veux savoir comment utiliser CSS pour définir un style spécifique s'il s'agit de IE8 et des versions antérieures. Je suppose que jQuery serait acceptable si c'est nécessaire, mais je ne le pense pas. Je sais que cela peut être fait uniquement avec CSS et HTML, je ne sais pas comment.

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

Comment sur cela?

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

Ou que si vous n'aimez pas ces déclarations

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

10
Adaz

Les commentaires conditionnels fonctionneraient (<!--[if lte IE 8]><stylesheet><![endif]-->), mais si vous voulez tout faire dans la feuille de style, il y a est un moyen :

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

La chose importante ici est le "\ 9", qui doit être exactement "\ 9". Je ne comprends pas exactement pourquoi.

EDIT: Le hack de\9 ne suffit pas. Pour exclure IE9, vous avez également besoin du :root hack :

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

D'autres navigateurs que IE peuvent prendre en charge :root. Combinez-le avec le hack\9 si vous l'utilisez pour cibler IE9.

15
Brilliand

Vous pouvez utiliser les commentaires conditionnels d'Internet Explorer pour ajouter un nom de classe à la balise racine HTML Pour les anciens navigateurs IE:

<!--[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]-->

Ensuite, vous pouvez définir des CSS spécifiques à IE en référençant le nom de classe approprié, comme ceci:

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

Source: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

3
Peter O.

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

sur l'exemple: color : green\9;

\9 n'a pas fonctionné pour ie11, mais \0 a fonctionné!

2
Tom Brito

Ciblez TOUTES LES VERSIONS de IE:

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

Cible tout sauf IE

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

Cible IE 7 SEULEMENT

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

Cible IE 6 SEULEMENT

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

Cible IE 5 SEULEMENT

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

Cible IE 5.5 SEULEMENT

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

Cible IE 6 et inférieur

<!--[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]-->

Cible IE 7 et inférieur

<!--[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]-->

Cible IE 8 et inférieur

<!--[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]-->

Cible IE 6 et SUPERIEUR

<!--[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]-->

Cible IE 7 et SUPERIEUR

<!--[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]-->

Cible IE 8 et SUPERIEUR

<!--[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

J'ai une solution utile pour IE 10 et 11. Le script vérifie l'existence de IE et de la version, puis ajoute la classe .ie10 ou .ie11 à la balise.

De cette façon, vous pouvez écrire des règles spécifiques comme .ie10 .something {} et elles ne sont appliquées que lorsque le navigateur est IE 10 ou 11.

Regardez, c'est utile pour la dégradation gracieuse, testé sur quelques sites commerciaux et pas vraiment hacky: http://marxo.me/target-ie-in-css

1
marxo

J'ai résolu de cette manière le curseur de saisie dans 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 */
}

Dans Internet Explorer pour Windows jusqu'à la version 8 incluse, s'il s'agit d'un fichier la valeur de l'URI relative est spécifiée dans un fichier de feuille de style externe, le L'URI de base est considéré comme étant l'URI du document contenant le fichier élément et non l'URI de la feuille de style dans laquelle la déclaration apparaît.

Arborescence de fichiers:

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

Bonnes références:

0
Riccardo Volpe