0

画像全体でcssスプライトを使用するこの要素があるとしますicon.png(80x120)::

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

通常、私はこれを使用します：

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

IE6の場合、どのように作成しますか？

編集：

この投稿に対するいくつかの回答から、多くの人が「pngtransprant」問題を解決するための解決策を提供しようとしていることがわかりました。

ただし、この投稿は「pngtransprant」だけでなく最も重要な「csssprite」にも関連していると思います。

つまり、ie6でsprite.pngをトランスプラントにしたとしても、その位置を適切な場所に設定するにはどうすればよいでしょうか。

4

2 に答える 2

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 に答える
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 に答える