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




site drupal 8 (4)

J'ai une div position absolue contenant plusieurs enfants, dont l'un est une div position relative. Lorsque j'utilise une percentage-based width sur un percentage-based width sur la div enfant, elle se réduit à 0 width sur IE7, mais pas sur Firefox ou Safari.

Si j'utilise la 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. Existe-t-il une solution facile à cela en plus de la pixel-based width de l’enfant?
  3. Existe-t-il un domaine de la spécification CSS qui couvre cela?

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?

C'est-à-dire que vous devez sensibiliser vos collègues / clients au fait que IE est nul.

Existe-t-il une solution facile en plus de la largeur en pixels de l’enfant?

Utilisez em unités em car elles sont plus utiles lors de la création de présentations 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 diminue proportionnellement à votre texte s'il est redimensionné (ce dont vous avez réellement 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'em (0,01 em) et le navigateur interprétera à votre guise.

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

Aucune, pour autant que je m'en souvienne, em 'et%' étaient destinés aux seules tailles de police, à partir de CSS 1.0.


IE avant 8 a un aspect temporel dans son modèle de boîtier qui crée notamment un problème avec les largeurs en pourcentage. Dans votre cas, une div positionnée par défaut n’a aucune largeur. Sa largeur sera déterminé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 div relativement positionné, son parent a une largeur de 0, raison pour laquelle il se réduit lui-même à 0.

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


La div doit avoir une largeur définie:

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

La div parent doit avoir une width définie, en pixels ou en pourcentage. Dans Internet Explorer 7, la div parent a besoin d'une width définie pour que les divisions en pourcentage enfants fonctionnent correctement.





internet-explorer-7