Appliquer le style uniquement sur IE
Voici mon bloc de CSS:
.actual-form table {
padding: 5px 0 15px 15px;
margin: 0 0 30px 0;
display: block;
width: 100%;
background: #f9f9f9;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
Je veux seulement IE 7, 8 et 9 pour "voir" width: 100%
Quel est le moyen le plus simple d'y parvenir?
11 réponses
Mise à Jour 2017
Selon l'environnement, les commentaires conditionnels ont été Officiellement obsolètes et supprimés dans IE10+.
Original
Le moyen le plus simple est probablement d'utiliser un commentaire conditionnel Internet Explorer dans votre HTML:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
Il existe de nombreux hacks (par exemple le hack underscore) que vous pouvez utiliser pour cibler uniquement IE dans votre feuille de style, mais cela devient très compliqué si vous le souhaitez cibler toutes les versions D'IE sur toutes les plates-formes.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
Explication: il s'agit d'une requête multimédia spécifique à Microsoft. En utilisant la propriété-ms-high-contrast spécifique à Microsoft IE, elle ne sera analysée que dans Internet Explorer 10 ou supérieur. J'ai utilisé les deux valeurs valides de la requête multimédia, donc elle sera analysée par IE seulement, si l'Utilisateur a un contraste élevé activé ou non.
En dehors des commentaires conditionnels IE, il s'agit d'une liste Mise à jour sur la façon de cibler IE6 à IE10.
Voir les hacks CSS et JS spécifiques au-delà D'IE .
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10 */
@media screen and (min-width:0\0) {
#veintidos { color: red}
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
Ainsi qu'un commentaire conditionnel pourrait également utiliser le sélecteur de navigateur CSS http://rafael.adm.br/css_browser_selector/ car cela vous permettra de cibler des navigateurs spécifiques. Vous pouvez ensuite définir votre CSS comme
.ie .actual-form table {
width: 100%
}
Cela vous permettra également de cibler des navigateurs spécifiques dans votre feuille de style principale sans avoir besoin de commentaires conditionnels.
Il y a plusieurs hacks disponibles pour IE
Utilisation de commentaires conditionnels avec stylesheet
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
Utilisation de commentaires conditionnels avec head section css
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
Utilisation de commentaires conditionnels avec des éléments HTML
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
Utilisation de la requête multimédia
IE10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
IE6,7,9,10
@media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}
IE6,7
@media screen\9 {
selector { property:value; }
}
IE8
@media \0screen {
selector { property:value; }
}
IE6,7,8
@media \0screen\,screen\9 {
selector { property:value; }
}
IE9,10
@media screen and (min-width:0\0){
selector { property:value; }
}
Je pense que pour les meilleures pratiques, vous devriez écrire IE instruction conditionnelle dans la balise <head>
cet intérieur a un lien vers votre feuille de style ie spéciale.
Ce doit être après votre lien CSS personnalisé afin qu'il remplace ce dernier,
J'ai un petit site donc j'utilise le même CSS ie pour toutes les pages.
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Cela diffère de la réponse de james comme je le pense (opinion personnelle parce que je travaille avec une équipe de designers et je ne veux pas qu'ils touchent mes fichiers html et gâchent quelque chose là-bas) vous ne devriez jamais inclure des styles dans votre fichier html.
Un peu en retard sur celui-ci mais cela a parfaitement fonctionné pour moi en essayant de cacher l'arrière-plan pour IE6 & 7
.myclass{
background-image: url("images/myimg.png");
background-position: right top;
background-repeat: no-repeat;
background-size: 22px auto;
padding-left: 48px;
height: 42px;
_background-image: none;
*background-image: none;
}
J'ai eu ce hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
Cela dépend vraiment des versions IE ... J'ai trouvé cette excellente ressource qui est à jour de IE6-10:
Hack CSS pour Internet Explorer 6
Il est appelé L'Étoile HTML Hack et ressemble comme suit:
- html .couleur {couleur: # F00;} Ce hack utilise CSS entièrement valide.
Hack CSS pour Internet Explorer 7
C'est ce qu'on appelle le Hack Star Plus.
*: premier enfant + html .couleur {couleur: # F00;} Ou un plus court version:
* + html .couleur {couleur: # F00;} Comme le hack HTML star, cela utilise CSS valide.
Hack CSS pour Internet Explorer 8
@ media \0screen { .couleur {couleur: # F00;} } Ce hacks n'utilise pas de CSS valide.
Hack CSS pour Internet Explorer 9
: racine .couleur {couleur: # F00 \ 9;} Ce hacks n'utilise pas non plus de CSS valide.
Ajouté 2013.02.04: malheureusement IE10 comprend ce hack.
Hack CSS pour Internet Explorer 10
@ écran multimédia et (- ms-contraste élevé: Actif), (- ms-contraste élevé: aucun) { .couleur {couleur: # F00;} } Ce hacks n'utilise pas non plus de CSS valide.
Pour / * Internet Explorer 9 + (one-liner) * /
_::selection, .selector { property:value\0; }
, Seule cette solution fonctionne parfaitement pour moi.
Bienvenue BrowserDetect - une fonction géniale.
<script>
var BrowserDetect;
BrowserDetect = {...};// get BrowserDetect Object from the link referenced in this answer
BrowserDetect.init();
// On page load, detect browser (with jQuery or vanilla)
if (BrowserDetect.browser === 'Explorer') {
// Add 'ie' class on every element on the page.
$(*).addClass('ie');
}
</script>
<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
div.ie {
// do something special for div on IE browser.
}
h1.ie {
// do something special for h1 on IE browser.
}
</style>
Le Object BrowserDetect fournit également des informations version afin que nous puissions ajouter des classes spécifiques - par exemple. $('*').addClass('ie9'); si (BrowserDetect.version == 9).
Bonne Chance....
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->
body.ie .actual-form table {
width: 100%
}