jquery が ie8 で PNG の不透明度を変更すると、黒いエッジが表示されます。ie6_html/css_WEB-ITnose での PNG 透明度の解決策

現在、インターネットでは Web ページの効果に対する要件がますます高まっており、PNG 画像を使用することは避けられません。PNG 画像は PNG8、PNG24、PNG32 のいくつかの形式に分かれており、その中で最も一般的に使用されている形式も同様です。適度な表示効果とサイズを備え、半透明、透明度、および非常に豊富な色をサポートしています。ただし、我が国のほとんどの国民が IE シリーズまたは IE を中心としたブラウザを使用しているため、また WINDOWS XP の市場が比較的大きいためです。国内ではシェアが高く、多くの人が依然として XP、IE7、IE8 およびその他のブラウザを使用していますが、これらのブラウザの PNG サポートには多かれ少なかれギャップがあり、IE6 は PNG をまったくサポートしておらず、IE7 IE8 は PNG を不完全にサポートしています。 IE7 IE8 での画像の透明度の変更はサポートされていません。透明な領域に黒い境界線が表示されます。これは、美しい外観を必要とするページでは受け入れられません。いくつか調べた結果、PNG を背景として使用するには、Microsoft を使用する必要があることがわかりました。画像をロードするための独自のフィルターにより、IE6 が PNG をサポートしていない問題を解決できます。また、IE7 で JQUERY アニメーションの透明効果を使用する場合の黒いエッジの問題も解決できます。 IE8. 以下のような実際の画像を含むコードがあります:

<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>

in ページの /body の終了タグの前に、まず jquery1.8 クラス ライブラリを参照してから、上記のコードを追加します。 表示には問題ありません。 IE6 7 8 では PNG24。アニメーションを実行したり、画像を取得する必要がある場合、IE 6 7 8 では見つからないことがわかります。PNG 画像を見つけた場合、またはその位置や透明度を変更しても応答がないことがわかった場合その理由は、correctPNG がページ上のすべての PNG の IMG タグを SPAN タグに置き換えてから、SPAN タグに filter: progid:DXImageTransform.Microsoft を使用して PNG 画像をロードするためです。そのため、画像を含めることをお勧めします。 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>

また、この画像の透明度や移動に加えて、この場合、幅と高さも変更する必要があります。次の方法をお勧めします。

<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>

バグ: IE7 および IE8 で画像を動的に変更する場合 たとえば、PNG 画像の透明度を変更します。フェードインを適用して画像の透明度を25%に調整すると、pngの透明情報が消えてしまうという非常に奇妙なバグが発生します。すごく汚い黒色になってしまいました！

IE7 および IE8 で PNG 画像の背景が黒くなるバグの解決策:

1. 画像の透明度を直接変更するのではなく、画像のコンテナを設定してコンテナの透明度を変更します

たとえば、元のコードは次のとおりです: 6be05929ab96648a8f5d9b41b4938cbb

次のように変更します:4095c14742530a3ae671e167daff85bd< ;img src="style/images/icon-shadow.png" />16b28748ea4df4d9c2150843fecfba68

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 何をするものですか?なぜ IE にこのようなバグがあるのでしょうか?

これらは 2 つの質問ですが、実際には答えは 1 つです。 IE は、CSS 属性ではなく、filter フィルター を通じて透明度を変更するため、このバグを理解したい場合は、フィルター フィルターから理由を見つける必要があります。フィルターがオブジェクトに作用する場合、そのオブジェクトは有形である必要があります。つまり、IE には非常に特殊な属性 hasLayout があり、この属性はレイアウトとしてコンテナーに与えられます。少し奇妙で、これを渡すことはできません。開始するには CSS を直接記述しますが、JavaScript を介して開始する必要があります。実際には、特別な CSS 属性を使用して hasLayout を偽装して開始するという方法があります。 (display:inline-block、float :left などの他の属性も問題ありませんが、副作用がないのはズームだけです)