CSS sprite 在其下方创建不需要的重复图像答案

【问题标题】：CSS sprite creating an unwanted duplicate image below itCSS sprite 在其下方创建不需要的重复图像
【发布时间】：2012-01-31 19:33:10
【问题描述】：

我网站的导航栏--ncptw2012--正在工作，除非我将光标悬停在“关于”按钮下方。这会导致其下方突然出现不需要的重复图像。

这是导航 CSS：

#navigation {
    width:960px;
    height:90px;
    margin:0 auto 0 auto;
    padding:0;
}   
#navigation ul {
  display:block;
  float:right;
  width:960px;
  height:90px;
  background:url(img/menu.jpg) no-repeat 0 0;
  list-style:none;
  padding:0;
}
#navigation ul li {
  display:block;
  float:left;  
  height:90px;
  text-indent:-10000px;
 }
#about {
  width:221px;
}
#call {
  width:203px;
}
#schedule {
  width:140px;
}
#explore {
  width:217px;
}
#register {
  width:179px;
}
#navigation ul li a {
  display:block;
  width:100%;
  height:100%;
}
#about a:hover {
  background:url(img/menu.jpg) no-repeat 0 -90px;
}
#call a:hover {
  background:url(img/menu.jpg) no-repeat -221px -90px;
}
#schedule a:hover {
  background:url(img/menu.jpg) no-repeat -424px -90px;
}
#explore a:hover {
  background:url(img/menu.jpg) no-repeat -564px -90px;
}
#register a:hover {
  background:url(img/menu.jpg) no-repeat -781px -90px; 
}

【问题讨论】：

尝试在#navigation ul 上设置overflow:hidden，或在#navigation ul a 上显式设置height

标签： css image hover sprite

【解决方案1】：

您的标记不好，请参阅：

<h2><a href="#">Chicago, Nov. 2 - 4, 2012, Doubletree Magnificent Mile, Colin Sato, Keynote Speaker</h2>

锚标记未关闭。这导致浏览器尝试更正它并在 about 链接之前添加一个结束标记，从而导致显示两个锚点。

【讨论】：

感谢第二双眼睛——修复了它。非常感谢！