CSS sprites and IE6

只愿长相守 提交于 2019-12-03 08:20:45

Yes IE 6 supports sprites but doesn't support 24 bit PNG transparency.

I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.

background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */

You can also use Glue http://gluecss.com/ It's an open-source command line tool to generate sprites.

CSS sprites is a general solution using backround-position, which is avaible even in IE5.

A good tutorial about them is located here: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

I have encountered the IE6 CSS sprites problem myself - I blogged it here:

There's a really easy fix - I quote myself here...

Luckily, the solution wasn't too bad. Internet Explorers passim seem to ignore overflow:hidden when a child element is set to position:relative. Not good news... but the solution is easy - set the element with overflow:hidden to also be position:relative and then change the position:relative declaration on the child to be position:absolute... the jobs a goodun.

The full details can be found on that link.

Yes. If you're using PNGs though you should consider a few things. Here is a decent summary of IE 6 PNG issues:

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

Yes.

CSS sprites is just a technique to use offset on background images to display different parts of the same image in different elements.

I use CSS sprites on for example the main menu on the website of the company I work for, and the flags on my own web site. I started using it before it was even called CSS sprites...

rahul

Browsers which support background-position property will support CSS sprites also.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Please take a look at the following questions also

CSS Sprites images rendered with bad quality in IE

CSS Sprite Help

You could just use an online sprites generator. There are so many of them available for free and most of them support all browsers.

Sprites can work perfectly in ie6. But a png image will not work, so use a gif. If you process a gif with Smush.it to losslessly remove overhead, you might get a file size smaller than the corresponding png.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!