Question

我刚刚遇到了article扩展的css sprites，它可以实现前景图像的spriting技巧。我tried使用该技术：悬停但它似乎不适用于IE和Opera。在此处查看我尝试将此技术用于菜单：http://www.kavoir.com/examples/jenny-css-sprites/menu.html

在FF和Safari上，它可以正常工作，但在IE和Opera中根本不起作用。以几种方式修改了代码，但仍然根本不起作用。也许这是不可能的？

试图询问作者，但她删除了我的评论。

知道如何在所有浏览器上使用它吗？

更新：感谢您的答案，但是：hover IS for，所以我相信所有IE浏览器都应该计算出效果。因此，问题很可能与剪辑属性有关。

我只想确定：hover是否可以正常使用剪辑。到目前为止似乎没有。

Answer 1

所描述的整个技术对我来说似乎有问题。

詹妮弗的观点：

出于辅助目的，您无法将替代文字附加到div
CSS Spriting和IE6 PNG修复程序不兼容
除非选择了打印背景图像的客户端选项（这对徽标和菜单等不利），否则图像不会在打印输出上打印出来。
对于页面中的图像（实际上不是背景图像），在CSS中隐藏图像似乎在语义上不好。

在1上，假设这些是背景图像而不是本身的语义图像，我认为正确的方法是将文本直接放在标记中并用CSS隐藏它，而不是相反。

2号有效，但不是世界末日。如果用户不想打印背景图像，为什么要强制执行此操作？这又回到了语义解释。

第4号我完全同意，但是如果你只是将图像隐藏在精灵图像的集合中，你还能获得什么？您可以对此进行辩论，但<img>具有表示具有URI的资源的语义含义，因此URI应该是不同的，不依赖于解释的CSS。查看/复制/保存图像将受到此负面影响。

在我的FF中也似乎反应相当缓慢（这无疑会受制于标签滥用），我认为剪辑数学是一种不可忽视的努力。

长话短说，我认为现有的背景图像/位置技术更胜一筹。

Answer 2

好的，这是我的研究发现的（如果我错了，请纠正我）： IE支持a：hover，但它显然不会将它应用于子元素。

所以，我使用overflow：hidden和margin使用你当前的标记创建了一个变通方法。我猜测你仍然可以使用clip属性，但它可能需要另一个元素（可能不是）。该解决方案已经here，并且似乎在FF和IE6中都能正常工作（尚未在其他浏览器中测试过）。

另外，我想说annakata说菜单按钮和徽标在历史上一直不是背景图像并打印在打印输出上，因此css spriting改变了这种行为（支持性能）。

Answer 3

您使用的是什么IE版本？

:hover不适用于较旧的IE（IE7应支持此伪类）。

本文“IE CSS Hover Fix”列出了一些用于使:hover正确运行的技术，如IE的专有表达式函数或HTC（HTML组件）。

Answer 4

实际上，IE支持：将鼠标悬停在链接上。我相信这里的问题是使用'Clip'css属性。我建议寻找另一个解决方案，这是常见的事情，调试它可能需要更长的时间来尝试不同的方法。

Answer 5

以下是我通常在没有A标签内的IMG子标签的情况下制作我的CSS精灵：

HTML：

<div class="menu">
    <a href="#">foo</a>
    <a href="#">foo</a>
</div>

CSS：

/* you need to specify its height and width so that they fit with the part of the sprite you want to show */
.menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;}
/* the background-position is set to top. */
.menu a{background: url(../images/whatever.png) no-repeat top center;} 
/* the background-position is set to bottom. */
.menu a:hover{background-position: bottom center;}

你的whatever.png文件的两个状态的高度都是200px。

多数民众赞成

扩展的css sprites无法使用：悬停？

5 个答案: