4

我刚刚遇到了这篇关于 css sprites 扩展的文章，它启用了前景图像的 spriting 技巧。我尝试在 :hover 上使用该技术，但它似乎不适用于 IE 和 Opera。请参阅我尝试在此处使用此技术作为菜单：http ://www.kavoir.com/examples/jenny-css-sprites/menu.html

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

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

知道如何在所有浏览器上进行这项工作吗？

更新：感谢您的回答，但 :hover 适用于 ，所以我相信所有的 IE 浏览器都应该解决这个问题。因此，问题很可能与剪辑属性有关。

我只是想确定 :hover 是否可以在 clip on 上正常工作。到目前为止似乎没有。

4

5 回答 5

4

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

詹妮弗的观点：

  1. 出于可访问性目的，您不能将替代文本附加到 div
  2. CSS Spriting 和 IE6 PNG 修复不兼容
  3. 除非选择了打印背景图像的客户端选项，否则图像不会在打印输出上打印出来（这对徽标和菜单等不利）
  4. 对于页面中的图像（实际上不是背景图像），在 CSS 中隐藏图像在语义上似乎很糟糕。

第一，考虑到这些是背景图像，而不是它们本身的语义图像，我认为正确的方法是将文本直接放在标记中并用 CSS 隐藏它，而不是反过来。

数字 2 是有效的，但不是世界末日。采取行动 3 是一种滥用恕我直言 - 如果用户不想打印背景图像，你为什么要强迫这个？这又回到了语义解释。

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

它在我的 FF 中的反应似乎也很慢（诚然，这会受到标签滥用的影响），我想剪裁数学需要付出相当大的努力。

长话短说，我认为现有的背景图像/位置技术是优越的。

于 2009-01-12T15:34:34.897 回答
4

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

因此，我使用您当前的标记创建了一个使用溢出：隐藏和边距的解决方法。我推测您仍然可以使用 clip 属性，但它可能需要另一个元素（尽管可能不需要）。解决方案在这里，似乎在 FF 和 IE6 中都能正常工作（尚未在其他浏览器中测试）。

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

于 2009-01-14T18:06:19.317 回答
1

你用的是什么IE版本？

:hover不应该在较旧的 IE 上工作（IE7 应该支持这个伪类）。

这篇“ IE CSS Hover Fix ”一文列出了一些用来让:hoverIE正确运行的技术，比如IE专有的表达式功能，或者HTC（HTML Component）。

于 2009-01-12T07:45:07.200 回答
1

实际上，IE 支持 :hover 链接。我相信这里的问题是使用'Clip' css 属性。我建议寻找另一种解决方案，这是很常见的事情，调试它可能需要更长的时间才能尝试不同的方法。

于 2009-01-12T07:49:57.830 回答
0

以下是我通常如何在 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。

就是这样

于 2009-01-14T18:18:20.243 回答