Pourcentage de largeur de l'élément enfant dans le parent en position absolue sur Internet Explorer 7
-
08-06-2019 - |
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.
- Y a-t-il quelque chose qui me manque ici ?
- Existe-t-il une solution simple à ce problème, outre le largeur basée sur les pixels sur l'enfant?
- Existe-t-il un domaine de la spécification CSS qui couvre cela ?
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 div
s 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 em
Les « 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>