Je veux cible IE7 et IE8 avec compatible W3C CSS. Parfois, la fixation des CSS pour une version ne corrige pas pour les autres. Comment puis-je y parvenir?
Réponses
Trop de publicités?
Cibler explicitement les versions IE sans hacks à l'aide de HTML et CSS
Utilisez cette méthode si vous ne voulez pas de hacks dans votre CSS. Ajouter un navigateur unique classe de l' <html> de l'élément de sorte que vous pouvez sélectionner en fonction de navigateur plus tard.
Exemple
<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head></head>
<body></body>
</html>
Puis dans votre CSS, vous pouvez très strictement l'accès de votre navigateur cible.
Exemple
.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}
Pour plus d'informations consulter http://html5boilerplate.com/
Cible les versions IE avec CSS "Hacks"
Plus au point, voici les astuces qui permettent de cibler les versions IE.
Utilisez "\9" à la cible IE8 et ci-dessous.
Utiliser "*" à la cible IE7 et ci-dessous.
Utiliser "_" à la cible IE6.
Exemple:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
Mise à jour: Cible IE10
IE10 ne reconnaît pas les instructions conditionnelles de sorte que vous pouvez l'utiliser pour appliquer un "ie10" classe à l' <html> élément
<!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
<head></head>
<body></body>
</html>
scragar
Points
4324
Joeytje50
Points
5705
La réponse à votre question
Un tout à fait valable, de manière à sélectionner tous les navigateurs, mais IE8 et ci-dessous à l'aide de l' :not() pseudo-classe. Depuis les versions IE 8 et ci-dessous ne prennent pas en charge :not(), sélecteurs en contenant sont ignorés. Cela signifie que vous pourriez faire quelque chose comme ceci:
p {color:red;}
p:not([ie8min]) {color:blue;}
C'est encore tout à fait valable, CSS, mais il cause de IE8 et inférieur à rendre des styles différents (et aussi de l'Opéra<9,5 et Safari<3.2).
D'autres astuces
Voici une liste de tous complètement valide CSS spécifiques à un navigateur sélecteurs j'ai pu trouver, sauf pour certains qui semblent assez redondant, tels que ceux qui optent pour seulement 1 type de l'ancien navigateur (1, 2):
/****** First the hacks that target certain specific browsers ******/
* html p {color:red;} /* IE 6- */
*+html p {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
} /* Chrome, Safari 3+ */
p, body:-moz-any-link {color:red;} /* Firefox 1+ */
:-webkit-any(html) p {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p {color:red;} /* Firefox 4+ */
/****** And then the hacks that target all but certain browsers ******/
html> body p {color:green;} /* not: IE<7 */
head~body p {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p {color:green;} /* not: IE<8 */
body:first-of-type p {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
Crédits et sources:
Bjorn Tipling
Points
16243
Eh bien, vous n'avez pas vraiment à vous soucier de IE7 code ne fonctionne pas avec IE8 parce que IE8 a un mode de compatibilité (il peut rendre des pages le même que IE7). Mais si vous voulez continuer à cibler les différentes versions d'IE, un chemin qui a été fait pendant un certain temps maintenant, consiste à utiliser les commentaires conditionnels ou commencer votre règle css avec un * pour cible IE7 et ci-dessous. Ou vous pourriez payer attention à l'agent utilisateur sur les serveurs et le plat d'un autre fichier CSS en fonction de cette information.
Guffa
Points
308133
Le problème réel n'est pas IE8, mais les hacks que vous utilisez pour les versions antérieures d'IE.
IE8 est assez proche pour être conformes aux normes, de sorte que vous ne devriez pas avoir besoin tous les hacks à tous, peut-être seulement quelques ajustements. Le problème est que si vous utilisez certains des hacks pour IE6 et IE7; vous aurez à faire en sorte qu'ils s'appliquent uniquement aux versions et pas IE8.
J'ai fait le site web de notre société compatible avec IE8, il y a un moment. La seule chose que j'ai vraiment changé, c'est l'ajout de la balise meta qui dit c'est à dire que les pages sont IE8 conforme...
