28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Ca fait déjà plusieurs fois que je suis confronté à un bug sous IE6 et je n'arrive pas à trouver des références qui me premettrait de le contourner ou meme simplement de comprendre dans quelles circonstances il se produit. J'aimerais bien comprendre car à chaque fois je bidouille en aveugle et ça m'énerve !

Dans le code ci-dessous, réduit au minimum pour obtenir le bug, le contenu de bloc1 n'apparait pas sous IE6.Si on sélectionne le texte, on voit qu'il est bien là et il reste visible après l'avoir déselectionné.

Le problème est résolu pour chacune de ces conditions:
- bloc1 n'a pas de padding
- pas de commentaire HTML
- bloc2 n'a pas de hauteur
- bloc2 n'existe pas
- container n'existe pas

Connaissez-vous ce bug ? Dans quelles circonstances se produit-il ? Existe-t-il une méthode pour le contourner ?

chaK!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<title>bug IE6</title>
<style type="text/css">
body {color: #fff;}
.container{background: blue;}
.bloc1{padding: 10px; background: lime;}
.bloc2{height: 20px;background: red;}
</style>
</head>
<body>

<div class="container">
 <p class="bloc1">Je ne vois pas ce texte sous IE6, ni son fond de 
couleur</p>
 <!-- commentaire -->
 <div class="bloc2">Ce texte est visible</div>
</div>

</body>
</html> 
chakal a écrit :
Connaissez-vous ce bug ? Dans quelles circonstances se produit-il ?

Ce bug est présent par exemple dans le blog d'Alsacrétions au niveau du fond des commentaires.

Notamment dans les articles comprennant beaucoup d'articles comme celui-ci.
Salut,

Il semblerait que ce soit un problème de haslayout, il suffit de donner la propriété zoom: 1 (non valide) à ton bloc ou mieux height: 1%, height: 1px;

documentation
Modifié par ghost (22 Mar 2007 - 14:44)
Administrateur
Attention aux url très longues qui déforment le forum Smiley decu
Merci d'utiliser le bouton "lien" pour ces cas précis.
Salut,
Ah! sans IE et ses bugs, la vie d'un concepteur de site WEB serait bien monotone !
Dans le cas présent, si la largeur du bloc1 n'est pas définie (x px ou x %)
et un padding-bottom différent de zéro le bloc n'est pas affiché.
Avec padding:10px 10px 0 10px, le bloc est affiché.
Il s'agit vraisemblablement, comme l'indique ghost d'un problème de haslayout.
Vous avez dit bizarre ?