Explication de la gestion des bugs height CSS
Définition bug height CSS
Vous trouverez ci-dessous divers bugs d'interprétation de la CSS height.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.
Bug height CSS n° 1
Bug height mis par behess
Système d'exploitation : windows xp
Navigateur : Firefox 1.5
Bug vérifié : oui
Problème avec height:
Problème de lecture en javascript des valeurs des attributs height et width d'un DIV sur tous les navigateurs.<script type="text/javascript">
var test;
test = document.getElementById("test");
alert(""+test.style.width+" / "+test.style.height);
//-> /
</script>
La lecture via le script fonctionne bien si les attributs sont définis dans un attribut style de la balise :<div id="test" style="width:64px;height:64px;"></div>
Mais si la déclaration est faite de manière générale (ou dans un fichier séparé) :<style type="text/css">
#test { width:64px; height:64px; }
</style>
Le script ne fonctionne pas ...
Solution du problème par DMC :
Solution de behess : Utiliser des déclarations locales pour width et height... mais ce n'est pas très pratique.
Autre solution de Dmc :
Si vous voulez récuper les propriétés en pixel, vous pouvez utiliser la propriété javascript :
offsetHeight et offsetWidth qui vous donneront la taille exact du bloc.
Ces dernières peuvent être différentes des tailles spécifiées dans la css si par exemple le contenu est trop grand.
Cependant, il y a toujours ce problème de bordures suivant la DTD (voir border)<script type="text/javascript">
var test;
test = document.getElementById("test");
alert( test.offsetWidth+" / "+test.offsetHeight);
//-> 64 / 64
</script>