[英]Can someone see why this nav bar looks different in chrome compared to IE and FF?
I have created a simple nav bar which you can see here . 我创建了一个简单的导航栏,您可以在这里看到。 I have no idea why it looks the same in IE and FF but different in Chrome. 我不知道为什么它在IE和FF中看起来一样,而在Chrome中却不同。 I am using: 我在用:
IE 10, FF 20 and Chrome 27. IE 10,FF 20和Chrome 27。
Here is the HTML: 这是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>
And the CSS: 和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;
}
There is a little gap at the right of the nav bar in FF and IE, but a bigger gap in Chrome, I have no idea how to style this nav bar so it is the same in all browsers, any insight is appreciated. 在FF和IE中,导航栏的右边有一个小缝隙,但是在Chrome浏览器中,则有一个较大的缝隙,我不知道如何设置此导航条的样式,因此在所有浏览器中都是一样的,任何见解都值得赞赏。
mayt i sure try this completly working in FF, CHROME, IE 我可能无法完全尝试在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;
}
#nav {
width: auto;}
or delete width form this class 或删除此类的宽度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.