проблемы с высотой и шириной div в IE

Question

У меня есть код ниже, который представляет собой div, используемый для навигации, он расположен вверху страницы внутри другого div.Он работает в любом браузере, в котором я тестировал, но 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>

Ширина div слишком великаIE и длина слишком короткая Я включил скриншоты ниже

Спасибо = D

Answer 1

в IE отступы рассчитываются как часть ширины / высоты.

Во всех других браузерах заполнение является дополнением к определенной ширине / высоте.

Пример: DIV100px x 100px с отступом 10px.IE: общая ширина / высота = 100px x 100px FF / Safari / Chrome: общая ширина / высота 120px x 120px

Вот хороший ресурс для вопросов IE.В основном IE6, но это полезно. IE шпаргалка