0

假设我有这个元素，它将使用整个图像的 css 精灵icon.png(80x120)：：

<div class="sprite"></div>

通常，我使用这个：

.sprite{
    background-image:url('icon.png');
    background-position:0px -20px;
    width:20px;
    height:20px;
}

对于IE6，如何制作？

编辑：

从这篇文章的一些答案中，我发现很多人试图给出解决“png transprant”问题的解决方案。

但是我认为这篇文章不仅与“png transprant”有关，而且与最重要的“css sprite”有关。

也就是说，即使我们在ie6中使sprite.png透明，但是如何将它的位置设置在正确的位置呢？

4

2 回答 2

0

前段时间我编写了自己的 jQuery PNG 修复程序。

它检查它是否是 IE6，检查 png 图像并将其替换为设置正确 css 的 div 以使其在 IE6 中工作。

将该函数添加到您的脚本中，并在需要时调用该函数。

function muIE6PngFix() {
    $(function() {
        if ($.browser.msie && $.browser.version <= 6) {
            $('img').each(function(i, e) {
                if ($(e).attr('src').toString().toLowerCase().indexOf('.png') != -1) {
                    $(e).wrap('<div />');
                    $(e).parent().attr('style', 'background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + $(e).attr('src') + ', sizingMethod="crop"); width:' + $(e).width() + 'px; height:' + $(e).height() + 'px;');
                    $(e).parent().attr('class', $(e).attr('class'));
                    $(e).parent().attr('title', $(e).attr('alt'));
                    $(e).css('visibility', 'hidden');
                }
            });
        }
    });
}
于 2012-05-17T08:42:18.410 回答
0

调用 png 支持脚本

<!-- START HTML : PNG FIX CODE  -->
<!--[if IE 6]>
    <script src="http://marszm.googlecode.com/svn-history/r12/trunk/js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('img,div,ul,li,li a,a,input,p,blockquote,span,h1,h2,h3');
        </script>
<![endif]-->
于 2012-05-17T08:44:21.130 回答