web-dev-qa-db-fra.com

Appliquer des règles CSS si le navigateur est IE

Duplicata possible:
Comment faire IE conditions en CSS?

Comment puis-je appliquer les règles ci-dessous à IE uniquement?

.abc {

float:left;
height:0;
margin:0 10px;
width:0;

/*Apply these rules for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
cssinternet-explorer
37
Mayur

Dans les navigateurs jusqu'à IE9 inclus, cela se fait via commentaires conditionnels .

<!--[if IE]>
<style type="text/css">
  IE specific CSS rules go here
</style>
<![endif]-->
29
Pekka 웃

Un bon moyen d'éviter de charger plusieurs fichiers CSS ou d'avoir du CSS en ligne est de remettre une classe à la balise body en fonction de la version d'Internet Explorer. Si vous n'avez besoin que de hacks généraux IE, vous pouvez faire quelque chose comme ça, mais il peut être étendu pour être spécifique à la version:

<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

Maintenant, dans votre code CSS, vous pouvez simplement faire:

.ie .abc {
  position:absolute;
  left:30;
  top:-10;
}

Cela maintient également vos fichiers CSS valides, car vous n'avez pas besoin d'utiliser des hacks CSS sales (et invalides).

23
DASPRiD

Une approche rapide consiste à utiliser ce qui suit en fonction de ce que vous voulez vous concentrer (vérifiez les commentaires), à l'intérieur de vos fichiers CSS (où margin-top, définissez l'attribut css que vous aimez):

margin-top: 10px\9; /*It will apply to all ie from 8 and below */
*margin-top: 10px; /*It will apply to ie 7 and below */
_margin-top: 10px; /*It will apply to ie 6 and below*/

Une meilleure approche serait de vérifier l'agent utilisateur ou un conditionnel si, afin d'éviter le chargement de CSS inutiles dans d'autres navigateurs.

18
JohnDel

Je préfère utiliser un fichier séparé pour les règles ie, comme décrit précédemment.

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

Et à l'intérieur, vous pouvez définir des règles pour différentes versions de, c'est-à-dire en utilisant ceci:

.abc {...} /* ALL MSIE */
*html *.abc {...} /* MSIE 6 */
*:first-child+html .abc {...} /* MSIE 7 */
5
angryobject