problèmes avec div hauteur et largeur dans IE

Question

J'ai le code ci-dessous qui est un div utilisé pour naviagtion son placé en haut de la page à l'intérieur d'un autre div. Cela fonctionne dans tous les navigateurs que j'ai testés mais IE 8/9.

CSS:

#nav 
{ 
text-align: center; 
background-color: #363A36; 
color: #ffffff; 
height: 25px; 
padding: 10px; 
margin-left: auto; 
margin-right: auto; 
width: 60%; 
margin-top: -100px; 
position: relative; 

} 

#nav a 
{ 
text-decoration: none; 
color: #ffffff; 
padding-left: 10px; 
padding-right: 0px; 
margin: 7px; 
border-left: 1px solid #ffffff; 
} 

#nav a:hover 
{ 
color: #ffffff; 
font-style: italic; 
} 

HTML:

<div id="header"> 
[HEADER] 
</div> 


<div id="nav"> 

    <a href="index.php" id="homelink">Home</a> 
    <a href="current.php" id="currentlink">Tutorials</a> 
    <a href="past.php" id="pastlink">Blog</a> 
    <a href="request.php" id="requestlink">About</a> 
    <a href="contact.php" id="contactlink">Contact</a> 

</div> 


<div id="content"> 

Content Here 

</div> 

La largeur div est grande dans IE et la longueur est trop courte, j'ai inclus des captures d'écran ci-dessous

Merci = D

Answer 1

dans IE le rembourrage est calculé en tant que partie de la largeur/hauteur.

Dans tous les autres navigateurs, le remplissage s'ajoute à la largeur/hauteur définie.

Exemple: un DIV de 100px x 100px avec un remplissage de 10px tout autour. IE: largeur/hauteur = 100px x 100px FF/Safari/Chrome: largeur/hauteur 120px x 120px

Voici une bonne ressource pour les questions IE. Surtout IE6, mais c'est utile. IE Cheat Sheet