有人可以看到为什么这个导航栏看起来与铬和IE和FF不同吗？

我创建了一个简单的导航栏，您可以看到here。我不知道为什么它在IE和FF中看起来是一样的，但在Chrome中却不一样。我使用：有人可以看到为什么这个导航栏看起来与铬和IE和FF不同吗？

IE 10，FF 20和Chrome 27

下面是HTML：

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>Gem Training services</title> 
<meta name="description" content="Gem training services"> 
<meta name="keywords" content=""> 
<meta name="author" content="Raymond Leadingham"> 
<meta name="dcterms.rightsHolder" content="Raymond Leadingham"> 
<meta name="viewport" content="width=1040" /> 
<link rel="shortcut icon" href="images/favicon.ico" /> 
<link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 

<body> 




<ul id="nav"> 
    <li><a href="index.php">Home</a></li> 
    <li><a href="ourexpertise.php">Our Expertise</a></li> 
    <li><a href="aboutus.php">About Us</a></li> 
    <li><a href="ourservices.php">Our Services</a></li> 
    <li><a href="learningmethods.php">Learning Methods</a></li> 
    <li ><a href="contactus.php">Contact Us</a></li> 
</ul> 


</body> 
</html>

而CSS：

#nav { 
    width: 1000px; 
    float: left; 
    margin: 0 0 48px 0; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
} 

#nav li { 
    float: left; 
} 

#nav li a { 
    display: block; 
    padding: 10px 40px; 
    text-decoration: none; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #1C4688; 
    border-right: 1px solid #ccc; 
} 

#nav li a:hover { 
    color: #45176E; 
    background-color: #fff; 
} 


ul li:first-child{ 
    border-left: 1px solid #ccc; 
}

有一个在一点空隙在FF和IE中的导航栏的权利，但在Chrome浏览器中存在更大的差距，我不知道如何设计这个导航栏，所以它在所有浏览器中都是一样的，任何洞察力都是值得赞赏的。

来源

2013-06-28 deucalion0

首先你的主要CSS前添加一个复位样式 - HTTP：// meyerweb.com/eric/tools/css/reset/您的导航上也有固定的宽度。 –

我看到了，它和我的FF和Chrome一样。屏幕截图？ – Naeem

#nav { 
    width: auto;}

完全地工作或删除宽度形式该类

来源

2013-06-28 11:22:53

我不能相信，固定它。我把它放在100％，然后确定它的宽度，结果没有宽度是答案！非常感谢，我对此进行了很多年的尝试，并且从来没有尝试过：\ – deucalion0

@ deucalion0我建议你在编写单行之前总是**正常化/重置** CSS，即使我们是浏览器，行为也很麻烦肯定他们应该渲染一切与相同的外观... –

感谢您的提示阿德里亚诺，我不知道这意味着什么，但它会做什么，但我会考虑现在使用它！谢谢！！ – deucalion0

可能就会发现我一定试试这个在FF，铬，IE

#nav { 
    width: 1000px; 

    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
} 

#nav li { 
    display:inline-block; 
}

来源

2013-06-28 11:19:24 falguni

有人可以看到为什么这个导航栏看起来与铬和IE和FF不同吗？

回答

相关问题