为什么图像精灵菜单无法正确显示，为什么链接不工作？

代码验证。左侧菜单中应该有两个图像，位于可见的筒仓上方。每个应该是一个链接。为什么图像精灵菜单无法正确显示，为什么链接不工作？

http://www.briligg.com/agnosticism.html

CSS是：外部样式表：

.menu { 
position: relative; 
float: left; 
margin: 10px; 
padding: 0; 
width: 150px; 
} 
.menu li { 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
left: 0; 
top: 260px; 
} 
.menu li, .menu a { 
width: 150px; 
height: 150px; 
}

内部样式表：

.menu { 
    height: 450px; 
} 
.mirror { 
    top: 0; 
} 
.mirror { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 0; 
} 
.wormcan { 
    top: 151px; 
} 
.wormcan { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 -151px; 
} 
.wormsilo { 
    top: 301px; 
} 
.wormsilo { 
    background: url(http://www.briligg.com/images/menu-ag.png) 0 -301px; 
}

HTML：

<ul class="menu"> 
    <li class="mirror"> 
     <a href="whoryou.html"></a> 
    </li> 
    <li class="wormcan"> 
     <a href="aroundyou.html"></a> 
    </li> 
    <li class="wormsilo"> 
     <a href="beyondyou.html"></a> 
    </li> 
</ul>

来源

2010-05-14 kim holder

嗡嗡声 - 也许你应该尝试设置链接（.menu a）到display: block以使链接正常工作。否则，链接不会伸展以使用指定的大小，链接是内联元素（纠正我，如果我错了，没有测试它）。

来源

2010-05-14 20:21:16 dhh

是的！那是干什么的，连同什么D.A.建议如下。 – 2010-05-14 20:49:22

在内部样式表，Y你必须指定更好的。因为.menu li是非常规定的，所以它超出了.wormcan。在内部样式表中试用.menu li.wormcan。

还没有测试过这个，但从快速的样子来看，这似乎是问题所在。

来源

2010-05-14 20:16:10

@briligg，使用Firefox中的http://getfirebug.com/这样的工具，您可以轻松检查元素并查看添加css的顺序。 – 2010-05-14 20:18:02

我不知道我是否正确地理解了你，但是作为第二个选择器的'.menu li'.mirror，.wormcan和.wormsilo。当我这样做，所有的图形消失。但这提醒我，在类似的页面上，这些选择器是id的，而不是类。所以我试过#mirror，#wormcan，#wormsilo。但图形仍然是不可见的。如果有任何帮助，萤火虫错误控制台说选择器预计。由于选择器错误，规则集被忽略。对于第63行，这是ul的结尾处的。 – 2010-05-14 20:39:50

等 - 我还没有将html从class =更改为id =。 woops。现在图形显示正确，但链接不起作用。现在试试dhh – 2010-05-14 20:42:01

为什么图像精灵菜单无法正确显示，为什么链接不工作？

回答

相关问题