Pourcentage de largeur de l'élément enfant dans le parent en position absolue sur Internet Explorer 7

StackOverflow https://stackoverflow.com/questions/6

Question

J'ai une position absolument div contenant plusieurs enfants, dont l'un est un enfant relativement positionné div.Quand j'utilise un largeur basée sur un pourcentage sur l'enfant div, il se réduit à une largeur « 0 » sur Internet Explorer 7, mais pas sur Firefox ou Safari.

Si j'utilise largeur des pixels, Ça marche.Si le parent est positionné relativement, 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 à ce problème, outre le largeur basée sur les pixels sur l'enfant?
  3. Existe-t-il un domaine de la spécification CSS qui couvre cela ?
Était-ce utile?

La solution

Le parent div doit avoir une définition width, soit en pixels, soit en pourcentage.Dans Internet Explorer 7, le parent div a besoin d'une définition width pour le pourcentage d'enfants divs pour fonctionner correctement.

Autres conseils

Voici un exemple de code.Je pense que c'est ce que vous recherchez.Ce qui suit s'affiche exactement de la même manière 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 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, voici un positionnement absolument div par 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 une fois le contenu rendu.Donc, au moment où IE rencontre et restitue votre position relative div son parent a une largeur de 0, c'est pourquoi il s'effondre lui-même à 0.

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

Pourquoi l'enfant pour le pourcentage de la largeur dans les parents absolument positionnés ne travaille-t-il pas dans IE7?

Parce que c'est Internet Exploder

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

Autrement dit, pour sensibiliser vos collègues/clients au fait que IE est nul.

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

Utiliser em unité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 la taille des polices.Ainsi, votre espace blanc grandit et diminue 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 préciser en centièmes de ems (0,01 em) et le navigateur interprétera comme bon lui semble.

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

Aucun, autant que je me souvienne emLes « et % » étaient destinés uniquement aux tailles de police dans CSS 1.0.

Je pense que cela a quelque chose à voir avec la façon dont hasLayout La 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.

Le div doit avoir une largeur définie :

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top