XVII. Les bugs d'Internet Explorer, les contourner, les utiliser

1. Pourquoi ?

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.

2. Avant-propos : 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>

3. Et alors ?

À 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 stye à 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...

4. 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 { 
    background:#FFE;
    border:1px solid silver;
    text-align:center;
  }
  HTML>BODY DIV.menu { 
    background:#FFE;
    border: 1px solid silver;
    text-align:center;
    position:fixed;
    bottom:1em;
    left:1em;
    right:1em;
  }

Cette méthode est utilisée dans la page Tableaux sans tableaux.

5. Quelques bonnes lectures

Dernière modification de cette page le mardi 23 novembre 2004 à 11h14.