IE6 是否支持 CSS 精灵?
9 回答
是的,IE 6 支持精灵,但不支持 24 位 PNG 透明度。
我使用这个 css hack 给 IE < 7 一个 gif 文件和其他所有的 24 位 png 透明度。
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
你也可以使用 Glue http://gluecss.com/ 它是一个开源的命令行工具来生成精灵。
CSS sprites 是使用背景位置的通用解决方案,即使在 IE5 中也可用。
关于它们的一个很好的教程位于:http ://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
我自己也遇到过 IE6 CSS sprites 问题——我在这里写了博客:
有一个非常简单的解决方法 - 我在这里引用自己的话......
幸运的是,解决方案还不错。Internet Explorer passim 似乎忽略了溢出:当子元素设置为位置时隐藏:相对。不是好消息......但解决方案很简单 - 将元素设置为 overflow:hidden 也为 position:relative ,然后将 child 的 position:relative 声明更改为 position:absolute... 工作很好。
可以在该链接上找到完整的详细信息。
You could just use an online sprites generator. There are so many of them available for free and most of them support all browsers.
是的。
CSS sprites 只是一种在背景图像上使用偏移来在不同元素中显示同一图像的不同部分的技术。
例如,我在我工作的公司网站上的主菜单和我自己网站上的标志上使用 CSS sprites 。我什至在它被称为 CSS sprites 之前就开始使用它......
是的。如果您使用的是 PNG,那么您应该考虑一些事情。这是 IE 6 PNG 问题的一个不错的总结:
Sprites 可以在 ie6 中完美运行。但是 png 图像不起作用,所以使用 gif。如果您使用 Smush.it 处理 gif 以无损消除开销,您可能会获得比相应 png 更小的文件大小。