有人可以看到為什么該導航欄與IE和FF相比在Chrome上看起來有所不同嗎？

Question

我創建了一個簡單的導航欄，您可以在這里看到。 我不知道為什么它在IE和FF中看起來一樣，而在Chrome中卻不同。 我在用：

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瀏覽器中，則有一個較大的縫隙，我不知道如何設置此導航條的樣式，因此在所有瀏覽器中都是一樣的，任何見解都值得贊賞。

Answer 1

我可能無法完全嘗試在FF，CHROME，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;
}

Answer 2

#nav {
    width: auto;}

或刪除此類的寬度

有人可以看到為什么該導航欄與IE和FF相比在Chrome上看起來有所不同嗎？

問題描述

2 個解決方案

解決方案1
1 2013-06-28 11:19:24

解決方案2
1 已采納 2013-06-28 11:22:53

有人可以看到為什么該導航欄與IE和FF相比在Chrome上看起來有所不同嗎？

問題描述

2 個解決方案

解決方案1 1 2013-06-28 11:19:24

解決方案2 1 已采納 2013-06-28 11:22:53

解決方案1
1 2013-06-28 11:19:24

解決方案2
1 已采納 2013-06-28 11:22:53