IE6: Hauteur "1em moins 1px"

J'ai besoin d'un div avec une hauteur de exactement 1em moins 1px. Ceci peut être réalisé dans la plupart des navigateurs comme ceci:IE6: Hauteur "1em moins 1px"

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <style type="text/css"> 

     .helper { 
      /* background-color: black; */ 

      position: absolute; 
      top: 5em; 
      left: 5em; 

      width: 2em; 
      height: 1em; 
     } 
     .target { 
      background-color: #89f; 

      position: absolute; 
      top: 0; 
      bottom: 1px; 

      width: 100%; 
     }   
    </style> 
</head> 
<body> 
    <div class="helper"> 
     <div class="target"></div> 
    </div> 
</body> 
</html>

La div "target" a la hauteur désirée. Le problème est que cela ne fonctionne pas dans IE6, car il ignore l'attribut bottom, lorsque top est défini (un problème bien connu).

Y at-il une solution de contournement pour IE6 (peut-être avec plusieurs divs imbriqués, avec des bordures/paddings/marges/peu importe), ou JavaScript sera la seule solution?

Veuillez noter que je ne peux pas utiliser le mode Quirks.

Source

2010-04-30 Chris Lercher

Vous m'avez eu jusqu'à l'IE6 et aucun combo mode quirks. Mes sympathies, et gardez votre menton. Microsoft abandonne complètement le support pour IE6 cet été. :) – Robusto

@Robusto: J'espère qu'ils vont le faire se désinstaller ;-) –

@chris_I: Se désinstaller et se lancer sur le trottoir. =) – Robusto

Est-ce que le div target doit être physiquement 1px plus petit ou simplement afficher 1px plus petit?

La meilleure façon serait d'ajouter dans un « IE6 seulement » stylesheet:

.helper {overflow:hidden;} 
.target {top:auto;}

Ceci affichera target comme 1em - 1px mais sa hauteur réelle est 1EM avec le haut 1px est caché.

IE6 est floconneux en matière de positionnement absolu.

Une autre solution, au lieu du code ci-dessus, serait d'ajouter dans un "IE6 seulement" stylesheet:

.target {position:static;margin:-1px 0 1px 0;}

Je vois que vous avez la solution absolue positionnée au travail. Génial!

Source

2010-05-02 16:51:09 Emily

Merci Emilie. Très intéressant, et cela pourrait aller dans une bonne direction! Cependant, je l'ai juste essayé, et la div n'est pas seulement un pixel plus petit mais plusieurs pixels (je dirais 3 ou 4). Des idées? –

@Emily: Okay, j'ai découvert que c'était dû à un autre problème IE6 avec le div supplémentaire que j'ai utilisé comme règle pour mesurer la hauteur [IE6 n'aime pas les divs vides, et donc il lui a donné quelques pixels de plus hauteur, ce qui bien sûr fait beaucoup de sens ...] Cela signifie: Votre solution est correcte, cela fonctionne :-) Il faudra ajouter un peu d'une solution de contournement, mais je pense que je peux gérer cela. –

Chris - J'ai ajouté une solution de position statique si la position absolue continue de vous causer des problèmes. – Emily

Est-ce requis par le client? Sinon, il suffit d'abandonner IE6 et hacks pour ce navigateur merde/vieux.

Source

2010-04-30 13:07:44 dariol

IE6: Hauteur "1em moins 1px"

Répondre

Questions connexes