IE7 Display Bug, imbottitura/margine magico che non dovrebbe esistere

Question

Prefazione: Scusa se questa domanda avrebbe dovuto essere pubblicata su un sito sorella. Ci sono così tanti ora che è difficile dire ciò che rientra ancora nella giurisdizione di So.

Problema: Sto avendo un problema con consecutivo <div> elementi. A volte c'è un Magia imbottitura/margine tra loro e non riesco a capire perché.

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

Come puoi vedere, c'è uno spazio tra il Div header del mio contenitore e il corpo del corpo. Lasciami spiegare come è impostato il mio DOM/CSS:

Html

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

Una semplice configurazione di Div contenitore/bambino, niente di speciale.

CSS

Top Cap:

.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);
}

Corpo:

.PIV_Body
{
    height: 266px;

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

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

Come puoi vedere, anche CSS piuttosto semplice, niente di eccessivamente elegante. All'interno del corpo c'è un'altra serie di <div> Articoli che seguono lo stesso principio di questo Div (Container Div, bambini impilati). Che non mostrano un'imbottitura strana come questa.

Ho usato gli strumenti per sviluppatori in IE9 (con gli standard IE7 abilitati) per ispezionare il DOM e vedere cosa potrebbe causare questo (come un margine che spinge verso l'alto o qualcosa del genere)

Come puoi vedere qui:

Corpo evidenziato http://img844.imageshack.us/img844/3448/ie7bug01.png Top messo in evidenza http://img192.imageshack.us/img192/46/ie7bug02.png

I limiti dei div sono intatti e corretti.

Conclusione Questo è un bug molto strano, l'ho visto in un mio precedente design e non sono stato in grado di capirlo là fuori. È davvero l'unico problema di migrazione IE7 che ho riscontrato con questo progetto finora. Per quanto ne sappia, sto seguendo gli standard HTML molto vicini (lo so che tende a non rispettarli in alcuni casi, ma il piano è di farlo nel modo più giusto possibile).

Domande per te:

• Cosa dovrei cercare che potrebbe causare questo?
• Sto facendo qualcosa di sbagliato? In tal caso, come posso risolverlo?
• C'è un modo più semplice / migliore di farlo?
• C'è qualcosa di ovvio che mi manca?

Anche

Se hai bisogno di chiarimenti o ulteriori informazioni, non esitate a lasciarli nei commenti, risponderò quando li vedrò. (Pubblicando questo tipo in ritardo di venerdì: O).

Answer 1

Ho trovato la risposta, quindi la posterò qui per chiunque atterra qui in cerca di aiuto con IE7.

Il problema era il font-size del Div superiore. Mentre avevo line-height: 1px; Imposta, il motore di rendering è ancora assegnato 14px per il 12px font, questa allocazione/imbottitura invisibile/margine/qualunque cosa sanguini attraverso il div anche con overflow: hidden o vincoli di dimensioni rigorose.

Basta assicurarsi che entrambe queste linee fossero nel mio Div superiore (più piccolo di una linea di testo):

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

... risolverà il problema.

Sembra che IE7 non obbedisce molto bene.