有人可以看到爲什麼這個導航欄看起來與鉻和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不同嗎？

回答

相關問題