html - 仅在 Google Chrome 上按钮之间的空白

Question

所以我一直在开发一个网站，但遇到了一个问题。网站上的一切都很好，但是当我在谷歌浏览器中打开网站时，导航按钮之间出现一些空白。我将显示屏幕截图，然后发布代码。

Firefox 屏幕截图: http://i.imgur.com/59Th3IQ.png
谷歌浏览器屏幕截图: http://i.imgur.com/Pn5a388.png

CSS

.nav {
    width: 960px;
    height: 60px;
    margin-top: 33px;
}

.nav img {
    float: left;
}

.nav .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.nav .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.nav .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.nav .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.nav .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.nav .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.nav .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }

.nav .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.nav .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.nav .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.nav .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.nav .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.nav .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }


HTML

<div class="nav">
<div class="home"><a href=""><img></a></div>
<div class="register"><a href=""><img></a></div>
<div class="forum"><a href=""><img></a></div>
<div class="banner"><img></div>
<div class="chat"><a href=""><img></a></div>
<div class="downloads"><a href=""><img></a></div>
<div class="donate"><a href=""><img></a></div>
</div>

Answer 1

为什么你有<img>您的元素中没有来源的标签？删除它们。另外你的 href 属性是空的。考虑制作它们 <a href="#"></a>

使用 w3 validator 确保您的 HTML 有效当您调试 css 显示问题时。