「-ms-filter」プロパティを使用するときに PNG アルファの透明度を維持する方法

Question

次の HTML があります。

<a><img src="myfile.png" /> Some text</a>

そしてこのCSS:

a:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: .75;
}

この問題は IE 8 と IE 7 の両方で発生します。

PNG画像が対象となる場合 -ms-フィルター または フィルター, 、そのアルファ透明度は台無しになります。試してみればわかります。これは IE 8 と IE 7 の両方のバグです。

CSS に適用されている「-ms-opacity」と「filter」プロパティを削除できますか?これの構文は何ですか?（例えば。何かのようなもの -ms-フィルター:"";)

この問題の回避策を知っている人はいますか?

Answer 1

UPDATE： AlphaImageLoader フィルターは、imgに直接適用される場合がありますアルファフィルター。フィルターの削除に関しては、 filter：none; を試しましたか？

はい、プログラムでIE6以下を条件付きコメントでターゲットにします。

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

IE7-js などのスクリプトも、PNG透明度を乱雑にすることなく処理します。非標準コードでCSSをセットアップします。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Answer 2

SpliFFの答えを装飾するだけで、次のjQueryをページに追加することでこの問題を修正できます。

$(function() {
    if (jQuery.browser.msie)
        $('img[src$=".png"]').each(function() { // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
});

これにより、ページ内のすべてのPNGにもAlphaImageLoaderが適用されます。

Answer 3

別の答えを探している人のために、私はプレーンな JavaScript で自分で書いた次のコードを使用してこれを解決しました。そのため、フレームワークに依存しません。それでも、それをフレームワークの DOM Ready イベント内に配置する必要があります (または、私のように domready.js を使用することもできます)。AlphaImageLoader を使用して、.PNG 拡張子を持つすべての画像を読み込みます。これは、アルファ フィルターを適用する前に行う必要があります (JS を使用してこのコードの後に​​フィルターを適用することもできます)。

以下のコード:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

IE の場合は、必ず条件付きコメントの中に入れてください。

<!--[if IE]><![endif]-->

うまくいったかどうか教えてください。敬具！