Découvrez la cause d'un certain style CSS calculé

Question

J'ai une <div> sur une page Web qui se termine par une propriété height calculée de 633px. Ceci n'est défini dans aucune feuille de style en cascade, en ligne ou non, ni dans un javascript. J'ai cherché partout dans mon code mais le numéro 633 n'apparaît nulle part. Je peux résoudre cela en définissant style="height: 420px;" qui est la hauteur que je veux, mais IE semble remplacer cela à la 633px que je trouverais dans d'autres navigateurs aussi par défaut. J'ai vérifié dans Google Chrome et Firefox/Firebug que les contenus réels de la div sont loin d'atteindre 633 pixels de haut. Est-ce que je peux trouver quelle est la raison de cette hauteur calculée? Pour être complet, voici ce que Google Chrome signale comme les propriétés de style du <div>.

Computed Style 
background-color: white; 
display: block; 
float: left; 
height: 633px; 
margin-left: 30px; 
margin-top: 20px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
width: 830px; 

Inline Style Attribute 
margin-left: 30px; 
margin-top: 20px; 

#overview 
background-color: white; 
float: left; 
padding: 0px; 
width: 830px; 

#overview, #overviewempty 
margin-top: 9px; (is crossed out) 

div 
display: block; 

Merci d'avance.

Modifier:

Le div dans les questions contient deux DIV, l'une avec une ligne de texte dans font-size: 16px;, et une div avec une hauteur de 367px.

Une autre modification:

Bon, alors je me suis dit ce qui cause cela. La seconde div que contient la div principale contient une image et une div qui flotte sur la droite de cette image, en utilisant position: relative; top: -335px;. Internet Explorer conserve l'espace où cet élément aurait été vide. Un moyen de contourner cela?

modifier finale:

a résolu le problème! J'enroulai le contenu du div flottant avec position: relative dans une deuxième div avec position: absolute, qui se débarrasse des espaces blancs sous l'image principale :) HTML final ressemble à quelque chose comme ceci:

<div id="overview"> 
    <div>Some text> 
    <div> 
    <img src="someImage.jpg"> 
    <div style="float: right; position: relative; top: -335px;"> 
     <div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;"> 
     Some floating contents 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Installez IE Developer Toolbar pour Internet Explorer. Cela rend parfois la vie beaucoup plus facile. EDIT: Les nouvelles versions d'IE contiennent par défaut des outils de développement, accessibles en appuyant sur F12.

Answer 2

La hauteur d'un élément est généralement déterminé par son contenu. Avez-vous 633px de valeur de texte ou d'autres choses là-dedans?

Le style calculé ne provient pas nécessairement d'une feuille de style ou d'un javascript. C'est juste ce que le style finit comme après que le moteur de rendu a fini de tout calculer.

Answer 3

Dans la même veine que IE Developer Toolbar, jetez un oeil à Firebug for Firefox.

Cela vous dira tous les styles qui s'appliquent à un élément et vous montrera ceux qui ont été remplacés.

Answer 4

joli graphique de https://developer.chrome.com/devtools/docs/elements-styles

cliquez sur "Computed Style" à findout pourquoi/ce Redéfinition de propriété les uns les autres.