CSS精灵和IE6

Question

IE6支持CSS精灵吗？

- Shivanand

Answer 1

是的，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 */

- Ryu

Answer 2

你也可以使用 Glue http://gluecss.com/，它是一个开源的命令行工具，用于生成精灵图。

- Jorge Bastida

Answer 3

CSS sprites是一种常见的解决方案，使用backround-position实现，即使在IE5中也可以使用。

关于它们的好教程在这里：http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/。

- Thinker

Answer 4

我自己遇到了IE6 CSS精灵问题 - 我在这里发表了博客：链接：

有一个非常简单的解决方法 - 我在这里引用自己的话...

幸运的是，解决方案并不太糟糕。Internet Explorer似乎会忽略overflow:hidden，当子元素设置为position:relative时。这不是好消息...但解决方案很容易 - 将带有overflow:hidden的元素设置为position:relative，然后将子元素上的position:relative声明更改为position:absolute...工作完成。

完整详细信息可以在该链接中找到。

- Fenton

---

嗨，史蒂夫，那个链接已经失效了（即http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/I-Said-Overflow-Hidden/上没有文章）。 - Dinis Cruz

@DinisCruz 链接已更正，您现在可以阅读原始文章。 - Fenton

Answer 5

你可以使用在线的精灵生成器。有很多免费的精灵生成器可供选择，大部分都支持所有浏览器。

- KirstenPowell

Answer 6

是的。

CSS sprites只是一种技术，它使用背景图像上的偏移量在不同的元素中显示同一图像的不同部分。

我在我工作的公司的网站的主菜单和我自己的网站上使用CSS sprites来显示国旗。我甚至在它被称为CSS sprites之前就开始使用它了...

- Guffa

Answer 7

支持 background-position 属性的浏览器也将支持 CSS 精灵。 CSS精灵：是什么，为什么很酷，如何使用它们 请还查看以下问题 IE中呈现低质量的CSS精灵图像 CSS精灵帮助

- rahul

Answer 8

是的。但如果你使用PNG格式的图片，你需要考虑一些问题。以下是IE 6 PNG问题的一个不错的总结：

http://24ways.org/2007/supersleight-transparent-png-in-ie6

- Jon

Answer 9

精灵在ie6中可以完美工作。但png图像将无法工作，因此请使用gif。如果您使用Smush.it处理gif以无损地去除开销，则可能获得比相应的png更小的文件大小。

- Willers

---

为什么PNG文件不能正常工作？半透明的PNG文件看起来不好，但是8位的PNG文件可以像GIF图像一样正常工作。 - roberkules