Hack CSS pour Internet Explorer

Il nous arrive souvent de nous arracher les cheveux avec les CSS. Surtout que d'un navigateur à l'autre le rendu n'est pas le même.
Le pire je pense c'est quand on doit travailler pour que le site soit compatible avec internet explorer 6.
Vous allez me dire que ce navigateur est obsolète depuis 10 ans mais pourtant il est encore bien présent chez nos clients.

Voici quelques astuces pour optimiser vos pages.

  • La meilleure façon de faire je pense c'est de créer une css spéciale pour ie6.
<!--[if IE 6]>

<style ... >
</style>
<![endif]-->

Dans le cas ci dessus on dit que ce n'est valable que pour IE6.

On peut aussi lui dire valable pour toutes les versions inférieures ou égales à IE 7.
Dans ce cas il faut alors mettre les lignes suivantes:

<!--[if lt IE 7]>

<style ... >
</style>
<![endif]-->

Pour toutes les versions IE:

<!--[if IE]>

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

Pour toutes les versions supérieures à IE 7:

<!--[if gte IE 7]>

<link rel="stylesheet" type="text/css"  href="ie7sup.css" />
<!--[endif]-->

Pour toutes les versions différentes de IE :

<!--[if !IE]>
<!-->

<link rel="stylesheet" type="text/css" href="all_except_ie.css" />
<!--<![endif]-->
  • Une autre façon est de modifier directement la css.

Si on veut que la css ne soit vue que par certains navigateurs:

body {
	color: red; /*Valable pour tous les navigateurs */
	color : green\9; /* IE8  */
	*color : yellow; /* IE7  */
	_color : orange; /* IE6 */
}

Vous pouvez aussi mettre le code suivant.

/* Seulement pour IE7 */
*:first-child+html [selector] {
	background: red;
}
 
/* Seulement pour IE6 */
* html [selector] {
	background: red;
}

Remplacer selector par exemple par : body, #my_id ou .my_class. pour changer la couleur de fond en rouge.

Et vous, avez vous d'autres astuces intéressantes ?

Un commentaire

  1. Un ptit truc que j’ai testé et qui fonctionne très étrangement :
    Dans un fichier CSS

    .class {
    margin-top: 4px; /* propriété pour les autres navigateurs que IE */
    <!–[if !IE]>
    margin-top: -11px;
    <!–>
    margin-top: -11px;
    <![endif]–>

    /* Il faut écrire dans les deux endroits la meme chose pour que la propriété soit appliquée à IE8,IE7 pas testé pour IE6 */

    }

    C’est assez étrange, mais ca m’a permis d’améliorer la compatibilité d’un forum entre les différents navigateurs un peu plus facilement.

    Si ca peut aider quelqu’un

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.