ie 8の下でjqueryはPNGのopacityを変えて黒い辺が現れて、ie 6の下でpngの透明な解決方法

現在、インターネットはウェブページの効果に対する要求はますます高くなって、避けられないのはPNGピクチャーを使って、PNGはいくつかのフォーマットに分けて、PNG 8 PNG 24 PNG 32、その中で最もよく使われて、表示効果と大きさが比較的に適当なのはPNG 24で、半透明で、透明で、色も非常に豊富ですが、私达の中国人はIEシリーズあるいはIEをコアシリーズのブラウザとして大多数を占めるため、また、WINDOWS XPは国内市場でのシェアが大きいため、XP上では多くの人がIE 6 IE 7 IE 8などのブラウザを使用しているが、これらのブラウザはPNGのサポートに多かれ少なかれ差があり、IE 6はPNGを完全にサポートしていない.IE 7 IE 8はPNGの不完全をサポートしている.IE 7 IE 8の下で画像に透明図を変更すると、PNGの透明領域を延長する場所には黒い枠がある.半透明であれば、半透明領域全体が黒であることは、美観を求めるページには受け入れられないことが分かった.研究の結果、PNGを背景に、マイクロソフト特有のフィルタで画像をロードすることで、IE 6がPNGをサポートしないという問題を解決することができ、IE 7とIE 8の下でJQUERYアニメーションを使用して透明効果を得たときに黒辺が現れるという問題も解決できる.次のようになります.

<script>
function correctPNG() {
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters)) {
        var lee_i = 0;
        var docimgs=document.images;
        for (var j = 0; j < docimgs.length; j++) {
            var img = docimgs[j]
            var imgName = img.src.toUpperCase();
            if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
                lee_i++;
                var SpanID = img.id || 'ra_png_' + lee_i.toString();
                var imgData = new Image();
                imgData.proData = SpanID;
                imgData.onload = function () {
                    $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
                }
                imgData.src = img.src;
                var imgID = "id='" + SpanID + "' ";
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                img.outerHTML = strNewHTML;
                j = j - 1;
            }
        }
    }
}
//     IE8      ，             addEventListener，         
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
    window.attachEvent("onload", correctPNG);
}
</script>

ページの/bodyの終了フラグの前にjquery1.8クラスライブラリを参照し、上記のコードを追加すると、IE 6 7 8はPNG 24を表示しても問題なく、animateアニメーションを実行したり、ピクチャを取得したりする必要がある場合、ie 6 7 8でPNGピクチャが見つからなかったり、その位置を変更したり、透明図が反応していないことがわかります.これはcorrectPNGがページ上のすべてのPNGのIMGタグをSPANタグに置き換え、SPANタグにfilter:progid:DXImageTransformを使用するためである.Microsoft.AlphaImageLoaderはPNGピクチャをロードするので、画像をDIVで含めることをお勧めします.このDIVにはIMGタグが1つしか許可されず、DIVの位置や透明度に関する操作を行います.例:

<div id='test'><img src='xxxx.png'/></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

もう1つは、この画像に対して透明と変位のほかに、幅と高さを変えることをお勧めします.この場合、以下の方法をお勧めします.

<div id='test'><img src='xxxx.png'/></div>
<script>
$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});
</script>

BUG:IE 7とIE 8の下でpngピクチャの透明度を動的に修正すると、例えばfadeInを適用してピクチャの透明度を25%にすると、非常に奇妙なバグが発生し、pngの透明な情報がなくなります!とても見苦しい黒になりました!
IE 7とIE 8の下でpng画像の背景が黒くなるバグソリューション:
1、画像の透明度を直接変えるのではなく、容器をセットして、この容器の透明度を修正する
たとえば、元のコードは
変更:
2、この容器に背景色をつける
非常に重要です.バグを解決する鍵は、次のようなステップです.

.share-list-icon-shadow{ 
    width:60px;height:21px; 
    position:absolute;bottom:8px;left:0px;z-index: 1; 
    margin: 0 auto; 
    display:block; 
    background:#FAFDEF; 
} 

一般的には、このバグで解決しますが、まだ問題がある場合は、以下を見てください.
3、容器にzoomを加える:1
zoom:1どんな役割を果たしていますか.なぜIEにこのバグが存在するのか?
これは2つの問題で、実は1つの答えです.IEは透明度をcss属性ではなくfilterフィルタで修正するので,このバグを理解するにはfilterフィルタから原因を探さなければならない.filterがオブジェクトに作用する場合、このオブジェクトは有形でなければならない.つまりlayoutでなければならない.IEにはhasLayoutという特殊な属性がある.hasLayout、この属性は容器にlayoutを与えることができる.hasLayoutという属性は少し奇妙で、cssを直接書くことで起動することはできない.javascriptで起動しなければならない.実際には起動する方法もある.特殊なcss属性を使用してhasLayoutを変相して起動します.このcss属性はzoomです(他の属性はdisplay:inline-block、float:leftなどでもいいですが、zoomだけは副作用がありません).