IE7 Afficher le bug, le rembourrage / marge magique qui ne devrait pas exister

Question

Préface: Désolé si cette question aurait dû être publiée sur un site sœur. Il y en a tellement maintenant, il est difficile de dire ce qui tombe encore sous la juridiction de So.

Problème: J'ai un problème avec consécutif <div> éléments. Parfois il y a un la magie rembourrage / marge entre eux et je ne peux pas comprendre pourquoi.

IE7 Magic Paddding Bug http://img689.imageshack.us/img689/6239/ie7bug.png

Comme vous pouvez le voir, il y a un espace entre la division de tête de mon conteneur et la div body. Permettez-moi d'expliquer comment mon DOM / CSS est mis en place:

Html

<div class="Product-IconView">
  <div class="PIV_TopCap"></div>
  <div class="PIV_Body">
      ...
  </div>
</div>

Une configuration simple conteneur / div enfant, rien d'extraordinaire.

CSS

Capitre supérieur:

.PIV_TopCap
{
    margin: 0px;
    padding: 0px;
    height: 10px;

    line-height: 1px; /* For IE so the text doesn't make the div higher */
    overflow: hidden;

    background-repeat: no-repeat;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}

Corps:

.PIV_Body
{
    height: 266px;

    padding-left: 10px;
    padding-right: 10px;

    background-repeat: repeat-y;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}

Comme vous pouvez le voir, CSS assez simple aussi, rien de trop sophistiqué. À l'intérieur du corps se trouve une autre série de <div> Éléments suivant le même principe que ce div (div de conteneur, enfants empilés). Qui ne présentent pas d'étrange rembourrage comme celui-ci.

J'ai utilisé l'outillage du développeur dans IE9 (avec les normes IE7 activées) pour inspecter le DOM et voir ce qui pourrait être causant cela (comme une marge qui pousse vers le haut ou quelque chose)

Comme vous pouvez le voir ici:

Body mis en évidence http://img844.imageshack.us/img844/3448/ie7bug01.png Top mis en évidence http://img192.imageshack.us/img192/46/ie7bug02.png

Les limites des Divs sont intactes et correctes.

Conclusion C'est un bug très étrange, je l'ai vu dans un design antérieur et je n'ai pas non plus pu le comprendre là-bas. C'est vraiment le seul problème de migration IE7 que j'ai rencontré avec ce projet jusqu'à présent. À ma connaissance, je suis très proche des normes HTML (je sais que c'est-à-dire ne pas les respecter dans certains cas, mais le plan est de le faire aussi bien que possible).

Questions pour vous:

• Que dois-je rechercher qui pourrait provoquer cela?
• Est-ce que je fais quelque chose de mal? Si oui, comment puis-je le réparer?
• Y a-t-il une façon plus simple / meilleure de procéder à ce sujet?
• Y a-t-il quelque chose d'évident qui me manque?

Aussi

Si vous avez besoin de clarifications ou de plus d'informations, n'hésitez pas à les laisser dans les commentaires, je les répondrai quand je les verrai. (Publier ce genre en retard un vendredi: o).

Answer 1

J'ai trouvé la réponse, donc je le publierai ici pour tous ceux qui atterrissent ici à la recherche d'aide avec IE7.

Le problème était le font-size de la division supérieure. Pendant que j'avais line-height: 1px; Ensemble, le moteur de rendu est toujours alloué 14px pour le 12px Police, cette allocation / rembourrage / marge invisible / tout ce qui est saigne par la div même avec overflow: hidden ou des contraintes de taille strictes.

S'assurer simplement que ces deux lignes étaient dans ma div supérieure (plus petite qu'une ligne de texte):

font-size: 1px; line-height: 1px;

... va résoudre le problème.

Il semble que IE7 n'obéisse pas très bien à la hauteur de ligne.