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

Translate

J'ai une position absolumentdivcontenant plusieurs enfants, dont l'un est undiv. Quand j'utilise unpercentage-based widthsur l'enfantdiv, il s'effondre en0 widthsur IE7, mais pas sur Firefox ou Safari.

Si j'utilisepixel 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. Existe-t-il une solution simple pour cela en plus depixel-based widthsur l'enfant?
  3. Y a-t-il un domaine de la spécification CSS qui couvre cela?
This question and all comments follow the "Attribution Required."

Toutes les réponses

Haley Lee
Translate

Le parentdivdoit avoir une définitionwidth, soit en pixels, soit en pourcentage. Dans Internet Explorer 7, le parentdiva besoin d'un définiwidthpour le pourcentage enfantdivs pour fonctionner correctement.

La source
Translate

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>
La source
Translate

IE antérieur à 8 a un aspect temporel dans son modèle de boîte qui crée notamment un problème avec les largeurs basées sur des pourcentages. Dans votre cas ici une position absolumentdivpar 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 moment où IE rencontre et rend votre position relativedivson parent a une largeur de 0, d'où la raison pour laquelle il se réduit lui-même à 0.

Si vous souhaitez une discussion plus approfondie à ce sujet avec de nombreux exemples de travail, jetez un œilici.

La source
Translate

Pourquoi le pourcentage de largeur enfant dans le parent positionné de manière absolue 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 sensibiliser vos collègues / clients au fait qu'IE est nul.

Existe-t-il une solution simple en plus de la largeur basée sur les pixels de l'enfant?

Utilisationemunités car elles sont plus utiles lors de la création de mises en page liquides, car vous pouvez les utiliser pour le remplissage et les marges ainsi que pour les tailles de police. Ainsi, votre espace blanc augmente et se réduit proportionnellement à votre texte s'il est redimensionné (ce dont vous avez vraiment 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 de 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, aussi loin que je me souvienneemLes 's et%' étaient uniquement destinés aux tailles de police à CSS 1.0.

La source
Translate

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

Avez-vous essayé votre code dans IE8 pour voir s'il fonctionne également? IE8 a un débogueur (F12) et peut également fonctionner en mode IE7.

La source
Translate

ledivdoit avoir une largeur définie:

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