1. Accueil
  2. Question et réponse
  3. IE7 ignorant la marge dans un div suivant un div positionné en absolu

IE7 ignorant la marge dans un div suivant un div positionné en absolu

2010-07-05 6 views
4

J'ai deux divs à l'intérieur d'un conteneur, le premier a un positionnement absolu. En ie7, la seconde div ignore apparemment la marge supérieure. Le rembourrage semble bien fonctionner, mais pour des raisons visuelles, je dois utiliser la marge.IE7 ignorant la marge dans un div suivant un div positionné en absolu

Je sais que le coupable est le div positionné absolu parce que si je l'enlève le div suivant fonctionne bien.

Cela ne se produit que dans IE7 (pas même dans IE6).

Aide! Edit: Je viens de trouver une solution qui consiste à donner le div padding-top parent juste pour ie7. Je voudrais juste savoir pourquoi cela se produit, et s'il y en a un, une solution plus propre, mais je n'ai pas besoin de hacks plus sales.

Source

2010-07-05 agente_secreto

+0

Y compris votre balisage (y compris Doctype) ou (mieux) un lien vers une page avec ce problème serait utile, afin que nous puissions voir votre code; Je l'ai testé ce week-end, mais je n'ai toujours pas un oeil magique pour regarder le code non révélé. ;-) –

Répondre

5

C'est ce que nous appelons la réduction des marges. Vous pourriez essayer de positionner la deuxième div aussi.

Vous pouvez trouver plus d'informations sur l'effondrement de la marge.

Vérifiez simplement les conditions ci-dessous si vous en avez dans votre code avant de commencer à lire tout l'article.

éléments BODY ne prennent jamais part à marge effondrement, car ils sont considérés comme magiques, ce qui signifie parfois un écart étrange ne montre pas dans Internet Explorer quand il fait dans d'autres navigateurs, lorsque l'effondrement arrive avec le haut du CORPS. Ce est généralement facile à résoudre; il suffit d'empêcher la réduction de la marge pour les autres navigateurs , et il fonctionne dans Internet Explorer aussi. (Notez que le code HTML des marges des éléments effondrement jamais un navigateur, c'est un comportement correct .)

Dans de rares cas, la marge effondrement où un élément intérieur a une bordure inférieure et un récipient extérieur a un fond border, peut provoquer la propagation de l'arrière-plan d'un élément intermédiaire dans le conteneur dans Internet Explorer.

Le bug le plus problématique est dû à comportement étrange hasLayout d'Internet Explorer. Ceci est un bug fondamental dans Internet Explorer 7- et affecte plusieurs autres choses aussi, mais cet article ne traitera que de la marge s'effondrer. En définissant certains styles sur , un élément le fait "avoir une disposition" (un concept unique à Internet Explorer, et non conforme aux normes). Le style le plus courant qui provoque un problème est la largeur. Quand un élément hasLayout suppose soudainement une hauteur minimale de 1em, et s'il est défini sur quelque chose de moins dans Internet Explorer 6, comme 0.5em, il utilise toujours 1em.

Un élément a disposition lorsque l'une des conditions suivantes est remplie:

  • Il présente une largeur et/ou une hauteur spécifiée
  • Il est un inline-block (display: inline-block)
  • Il a un positionnement absolu (position: absolu)
  • Il est un flotteur (float: gauche, float: right)
  • Il est un élément de table
  • Il est transformé (style = « zoom: 1 »)

Hauteur ne provoque habituellement pas un problème , depuis la mise en hauteur sera éviter l'effondrement dans d'autres navigateurs de toute façon. Cependant, déclenchant hasLayout sur un élément imbriqué où le parent a empêché l'effondrement marge en utilisant bordures ou rembourrage, peut provoquer des marges à disparaître ou à l'effondrement par le parent, quelle que soit du rembourrage ou frontières. En général, hasLayout est un désordre , et il est préférable de l'éviter dans endroits où les marges sont critiques.

J'espère que cela vous aidera à résoudre vos problèmes.

Source

2010-07-07 06:15:42

Questions connexes

 Questions connexes