嘿，我正在努力让这个导航系统正常工作:
http://www.moreheadplanetarium.org/redesign/nav.html
我不明白为什么“当前”选项卡的背景图像延伸到链接范围后面。它不会在其他状态(正常和悬停)上执行此操作 - 我已经在这些状态下使用不同的图像对其进行了测试，因为没有选项卡你无法真正分辨。
这让我发疯，因为该技术适用于事件和悬停，但不适用于“当前”元素的特殊类别。帮助将不胜感激!谢谢~
最佳答案
我不确定您如何看待背景图像不延伸到跨度后面。 span 标签位于 anchor 元素内，如下所示:
+-----------+
| +-----+|
| | ||
| +-----+|
+-----------+
span 标签不会像这样延伸到 anchor 标签之外:
+--------+
| +------+
| | |
| +------+
+--------+
它在所有状态下都一样，不同之处在于对于正常和悬停状态，在可以看到 anchor 背景的跨度背景中没有透明部分(除非你非常仔细地观察阴影)。
解决方案是不在背景图像上使用透明度。让它变得坚实，看起来像背景上的影子。
这也将解决双重阴影的问题。如果仔细观察，您会注意到 span 标签中背景图像的阴影被添加到 anchor 标签中背景图像的阴影中，导致它们重叠的地方出现较暗的阴影。在选项卡的最左侧，您只有 anchor 标记的背景，阴影更亮。双阴影效果出现在所有选项卡上，但对于正常和悬停状态，它非常微妙，您必须知道它在那里才能看到它。
关于带有选项卡式导航的 CSS 滑动门和 sprite - 看起来不像是选项卡式的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1716669/