Élément enfant de pourcentage de largeur dans parent entièrement positionné sur Internet Explorer 7

I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to '0' width on Internet Explorer 7, but not on Firefox or Safari.

Si j'utilise pixel width , cela fonctionne. 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, à part la largeur basée sur les pixels sur enfant?
  3. Y a-t-il une zone de la spécification CSS qui couvre cela?
0
ajouté édité
Vues: 86

4 Réponses

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

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class = "snippet-code">

 #absdiv {
  position: absolue;
  gauche: 100px;
  haut: 100px;
  largeur: 80%;
  hauteur: 60%;
  fond: # 999;
}

#pctchild {
  largeur: 60%;
  hauteur: 40%;
  arrière-plan: #CCC;
}

#reldiv {
  position: relative;
  à gauche: 20px;
  en haut: 20px;
  hauteur: 25px;
  largeur: 40%;
  fond: rouge;
}  
 <div id = "absdiv">
    <div id = "reldiv"> </div>
    <div id = "pctchild"> </div>
</div>  
</div></div>
0
ajouté

IE avant 8 a un aspect temporel à son modèle de boîte qui crée notamment un problème avec des largeurs basées sur le pourcentage. Dans votre cas ici, un div positionné 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 après le rendu du contenu. Ainsi, au moment où IE rencontre et rend votre div relativement positionné, son parent a une largeur de 0, c'est pourquoi il s'effondre lui-même à 0.

Si vous souhaitez une discussion plus approfondie de ceci avec beaucoup d'exemples de travail, ayez un ici < / a>.

0
ajouté

Pourquoi doesn? t le pourcentage largeur enfant   dans le travail des parents absolument positionné   dans IE7?

Parce que c'est Internet Exploder

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

C'est-à-dire, pour éveiller la conscience de vos collègues / clients qu'EI est nul.

Y a-t-il une solution facile à côté de la largeur en pixels de l'enfant?

Utilisez les unités em 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étrécit 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; il n'y a rien pour vous empêcher de spécifier en centièmes d'ems (0.01 em) et le navigateur interprétera comme bon lui semble.

Y a-t-il une zone de la spécification CSS qui couvre cela?

Aucun, autant que je me souvienne de em et de% 's étaient destinés uniquement à la taille des polices de CSS 1.0.

0
ajouté

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

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

0
ajouté