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中，填充是作为宽度/高度的一部分计算的。

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

示例：DIV为100px x 100px，周围有10px填充。 IE：总宽度/高度= 100px x 100px FF / Safari / Chrome：总宽度/高度120px x 120px

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

IE中div高度和宽度的问题

1 个答案: