CSS:Bugs d'Internet Explorer

Un article de WikiTuto.

Jump to: navigation, search

Apprendre les CSS

CSS

Généralités

Feuilles de style : appliquer un style

Feuilles de style : liste des éléments

Exemple de réalisation de feuille de style

Utilitaires CSS

Positionnement et affichage

Tableaux sans tableau

Bouton CSS sans programmation

Les bugs d'Internet Explorer

modifier Tdm CSS

Sommaire

1 Explication
2 Compléments sur la syntaxe d'une feuille de style
3 Bug
4 Exemple
5 Liens externes
6 Source

[modifier]

Explication

On a déjà vu plusieurs fois qu'Internet Explorer est vraiment peu efficace sur les feuilles de style. Le problème c'est que de (trop !) nombreux internautes l'utilisent encore, et que vos pages doivent être visibles avec tous les navigateurs...

Nous pouvons nous simplifier la vie en apprenant à utiliser les bugs d'Internet Explorer à notre avantage.

Nous n'en verrons qu'un ici, mais à vous d'en trouver d'autres.

[modifier]

Compléments sur la syntaxe d'une feuille de style

On a vu qu'écrire (X et Y étant des balises quelconques) :

X Y {
 bla bla bla
}

permet de restreindre l'application de ce style aux cas où <y> est un héritier de <x>, c'est-à-dire quand <y> est située dans <x>, c'est-à-dire :

<x> 
 ....  
<y> .... ici le style s'applique .... </y>
 ....
</x>
<y> .... ici le style ne s'applique pas .... </y>

Il en existe une variante :

X > Y {
  bla bla bla
}

qui restreint l'application de ce style aux cas où <y> est un héritier direct (ou plus simplement un enfant) de <x>, c'est-à-dire quand aucune autre balise n'est entre <y> et <x>.

Autrement dit :

<x>
  .... 
  <z>
  .... 
   <y> .... le premier style s'applique, pas le deuxième .... </y>
     .... 
  </z> 
  ....
</x>
<x>
  ....
   <y> .... les deux styles s'appliquent .... </y>
    ....
</x>
 <y>
 .... aucun des deux styles ne s'applique ....
</y>

[modifier]

Bug

À cause d'un bug (!) de son parser la notation précédente n'est pas comprise par Internet Explorer.

Comme de plus une nouvelle définition écrase toute ancienne déclaration pour la même balise, il suffit d'écrire :

balise {
  le style à appliquer à Internet Explorer
 }
 html>body balise {
 le style à appliquer aux autres navigateurs
  }

Internet Explorer lira correctement le premier style, mais sera incapable de lire le deuxième. Il appliquera donc le premier.

Un autre navigateur lira bien le premier style. Puis il lira également le deuxième style (qui signifie qu'il doit s'appliquer à la balise quand elle est déscendante de BODY, qui doit être elle-même fille de HTML, c'est-à-dire toujours, si votre code HTML est bien écrit) et qui remplacera le premier...

[modifier]

Exemple

Une feuille de style pour positionner un menu fixe en bas de l'écran.

Cependant Internet Explorer ne sait pas positionner de tels éléments, donc on lui demandera simplement de faire un cadre qui sera en bas du texte (sans doute pas aussi « beau » qu'on aurait voulu, mais comme il ne peut pas faire mieux, on s'en contentera...).

div.menu { /* version pour IE */
  background:#ffe;
  border:1px solid silver;
  text-align:center;
 }
 html > body div.menu { /* version pour les autres navigateurs */
  background:#ffe;
  border: 1px solid silver;
  text-align:center;
  position:fixed;
  bottom:1em;
  left:1em;
  right:1em;
  }

[modifier]