Élément enfant de largeur en pourcentage dans un parent absolument positionné sur Internet Explorer 7

J'ai un absolument positionné divcontenant plusieurs enfants, dont l'un est relativement positionné div. Lorsque j'utilise un percentage-based widthsur l'enfant div, il s'effondre 0 widthsur IE7, mais pas sur Firefox ou Safari.

Si j'utilise pixel width, ça marche. Si le parent est relativement positionné, le pourcentage de largeur sur l'enfant fonctionne.

1. Y a-t-il quelque chose qui me manque ici?
2. Y a-t-il une solution facile à cela en plus pixel-based widthde l'enfant?
3. Y a-t-il un domaine de la spécification CSS qui couvre cela?

Le parent divdoit avoir une définition width, en pixels ou en pourcentage. Dans Internet Explorer 7, le parent a divbesoin d'un widthpourcentage défini pour que l'enfant divfonctionne correctement.

Voici un exemple de code. Je pense que c'est ce que vous recherchez. Ce qui suit affiche exactement la même chose dans Firefox 3 (mac) et IE7.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

IE avant 8 a un aspect temporel à son modèle de boîte qui crée notamment un problème avec les largeurs basées sur un pourcentage. Dans votre cas ici, un élément absolument positionné divpar défaut n'a pas de largeur. Sa largeur sera calculée en fonction de la largeur en pixels de son contenu et sera calculée après le rendu du contenu. Donc, au point, IE rencontre et rend votre position relativementdiv a une largeur de 0, c'est pourquoi il se réduit à 0.

Si vous souhaitez une discussion plus approfondie à ce sujet ainsi que de nombreux exemples de travail, jetez un œil ici .

Pourquoi le pourcentage enfant de largeur dans le parent absolument positionné ne fonctionne-t-il pas dans IE7?

Parce que c'est Internet Explorer

Y a-t-il quelque chose qui me manque ici?

Autrement dit, pour faire prendre conscience à vos collègues / clients que IE craint.

Y a-t-il une solution facile en plus de la largeur en pixels sur l'enfant?

Utilisez des emunités car elles sont plus utiles lors de la création de dispositions liquides, car vous pouvez les utiliser pour le remplissage et les marges ainsi que pour les tailles de police. Ainsi, votre espace blanc s'agrandit et se réduit proportionnellement à votre texte s'il est redimensionné (ce qui est vraiment ce dont vous avez besoin). Je ne pense pas que les pourcentages donnent un contrôle plus fin que les ems; rien ne vous empêche de spécifier en centièmes d'ems (0,01 em) et le navigateur interprétera comme il l'entend.

Y a-t-il un domaine de la spécification CSS qui couvre cela?

Aucun, pour autant que je m'en souvienne, emles s et les% étaient destinés uniquement aux tailles de police en CSS 1.0.

Je pense que cela a quelque chose à voir avec la façon dont le hasLayout propriété est implémentée dans l'ancien navigateur.

Avez-vous essayé votre code dans IE8 pour voir si cela fonctionne aussi? IE8 possède un débogueur ( F12) et peut également s'exécuter en mode IE7.

Le divbesoin d'avoir une largeur définie:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>