html - IE中div高度和宽度的问题

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>

IE 中的 div 宽度太大，长度太短，我在下面包含了屏幕截图

谢谢=D

Answer 1

在 IE 中，填充被计算为宽度/高度的一部分。

在所有其他浏览器中，填充是除了您定义的宽度/高度之外。

示例:一个 100 像素 x 100 像素的 DIV，四周填充 10 像素。 IE:总宽度/高度 = 100px x 100px FF/Safari/Chrome:总宽度/高度 120px x 120px

这是解决 IE 问题的好资源。主要是 IE6，但它很有帮助。 IE Cheat Sheet