作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个简单的导航栏,您可以看到 here .我不知道为什么它在 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 中间隙更大,我不知道如何设置此导航栏的样式,所以它在所有浏览器中都是一样的,任何见解都值得赞赏.
最佳答案
#nav {
width: auto;}
或者从这个类中删除宽度
关于html - 有人能看出为什么这个导航栏在 chrome 中看起来与 IE 和 FF 不同吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17363408/
我是一名优秀的程序员,十分优秀!