Hauteur minimale balise div sous IE [Résolu/Fermé]

Signaler
-
 bobo56890 -
Bonjour,

J'ai fait l'expérience et il m'est impossible de créer une boite à la l'aide de la balise div de hauteur minimum à 19 pixels sous IE. Sous Firefox pas de soucis.

Voici le code pour le boite de hauteur 5 pixels, elle apparaît de hauteur 19 pixels sous IE mais bien de hauteur 5 pixels sous Firefox: 
<html>
<head>
<style>
#monclaque{
  width:100px;
  height:5px;
  background-color: #990000;
}
</style>
</head>
<body>
<div id="monclaque"></div>
</body>
</html>


Savez-vous pourquoi ? Si oui comment résoudre le problème ?

Merci.

3 réponses

Réponse 1 / 3
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 901
salut,

tu testes sous IE 6 ?
Signaler

Bonjour Dalida,
J'ai IE 7.
Mais je suppose que c'est identique sous les autres versions d'IE ?
Réponse 2 / 3
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 901
disons qu'IE6 est particulièrement mauvais !

pour ton <div> as-tu essayé d'enlever les marges et espacements ? 
#monclaque{
margin:0;
padding:0;
  width:100px;
  height:5px;
  background-color: #990000;
}

ou alors en ajoutant du contenu, difficile de prédire le comportement sur une balise vide .
Signaler

Enlever les marges et les espacements n'y change pas grand chose, ajouter un contenu non plus.
En faite je viens de trouver le truc, la balise div réagit à la propriété "font-size" (que je croyais réservé au texte) j'ai donc remplacer pour IE la propriété "height" par la propriété "font-size" et cela fonctionne. Par contre ne me demandez pas pourquoi !!!
Signaler
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 901 > bobo56890
dans ce cas, ça doit être {line-height}.
mais c'est surprenant !
Signaler
>
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
Ben non cela ne fonctionne pas avec la propriété "line-height", j'avais déjà essayé.
Effectivement j'avais que c'est bizarre.

J'ai tout de même envie de laisser ce sujet ouvert pour la question pourquoi obligé de mettre la propriété {font-size: 1px} sur les balises div inférieur à 19px sous IE ? sinon le bloc est automatiquement = à 19 px de hauteur.
Réponse 3 / 3
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 901
quand c'est sous IE et que c'est bizarre, ça sent le has layout…

+ https://forum.alsacreations.com/topic-4-17152-1-resoluHauteur-div.html

+ https://www.alsacreations.com/astuce/lire/68-pourquoi-mon-bloc-a-une-hauteur-plus-grande-que-prvue-sous-ie.html
Signaler

Bon d'après les liens que tu as fourni cela semble un problème connu de HasLayout donc exclusivement sous IE.
Je vais donc clore ce sujet.
Merci d'avoir participé.
Posez votre question