それはすべて、新しい仕事に着いたとき、古き良き処方pngシェックでフィルタープロパティのpngを修正することが不可能であるという事実から始まりました。それは、コードを膨らませ、それを取り除く必要があり、そして最も重要なことには、パスに混乱がありますCMSで。 その時までに、IE6で1回手を振るだけではバックグラウンドリピートとバックグラウンドポジションを達成できないことにすでに慣れていましたが、単純に画像を修正しても出血が多すぎました（ところで、これらのプロパティの問題に対する解決策は解決しません！ ） 次に、他の人が使用したソリューションを使用する必要がありました：sizingMethod = "scaled"および要素 "png"および "png-scaled"の2つのクラスを実行する必要がある場合、 jquery.iFixPng +別のjs。 最初はこのメソッドも使用しましたが、それでも純粋にJSにあることに気がつきました。 私は考え始めました。
表現に関する解決策を書くことは難しくありませんでした。 行う必要がある主なことは、エクスプレス内でz_gif変数を渡すことでした。これは、img要素を修正するための単一ピクセルの透明gifへのパスです。 しかし、それでも他のタイプセッターに、明示的な解決の方法がJSよりも優れている理由を説明できませんでした。 しばらくして、私は1つのページですぐに20 png-shekのどこかにあるプロジェクトに取り組み始めました。 JSの修正は、一部の写真がページの半分のサイズであったため、すべての栄光で現れました。サイトを読み込んだ後、ユーザー（顧客を含む）は、コミットされていない写真を3秒間見た後、すべてがきれいになりました。 顧客からは非常に不満があり、「何もできない」と肩をすくめました。 そして、結局、私はjs-fixをexpressionに置き換えて、私が望むものを達成することに決めました：読み込み後、ユーザーはコミットされていない画像を見ず、代わりに空でした！
ユニバーサルクラス
私はしばらくの間この修正を使用しましたが、スケーリングされた画像には別のクラスを使用しなければならなかったという事実に満足していませんでした。 これを修正し、2つのクラス（pngとpngスケール）を削除して、1つを優先したかったのです。 両側が1ピクセルを超える画像をスケーリングすることは一般に非論理的であると思い（99％のケースに1があることは明らかですが、99に満足しています）、チェックし、それに応じてsizingMethodを「scale」に変更しました。
* html .g-png24 {
behaviour:expression(
!this.fixedPNG?
(function(el){
if (el.tagName.toLowerCase() == "img") {
el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + el.src + ")";
el.style.backgroundImage = "none";
el.src = z_gif; // z_gif html', - : <script>var z_gif = {{path-to-z-gif}}</script>
}
else {
var sizingMethod = "crop";
var tmpImg = new Image();
tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
sizingMethod = "scale";
}
el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + el.currentStyle.backgroundImage.split('\"')[1] + ", sizingMethod='"+sizingMethod+"')";
el.style.backgroundImage = "none";
el.src = z_gif;
}
el.fixedPNG = true;
})(this):''
);
}
有害です！重要
この解決策は、背景画像が設定されている要素に修正を適用するまで有効でした！重要なフラグと修正は機能しませんでした！ さらに興味深いことに、他の修正も機能しませんでした！ 私は考え始め、多くのオプションを試しました：JSを使用して重要なフラグを設定し、新しい要素を再作成し、背景画像を除くすべてのプロパティを複製し、currentStyleプロパティなどを取得します...しかし、結局はすべてがやや単純すぎることが判明しました：同じスタイルシートで、追加のルールを作成する必要がありました。
* html .png-fixed {
background-image: none !important;
}
要素クラスpng-fixedを追加するだけで機能しました！ :)
間違える必要がありますか？
しかし、この決定は休息を与えませんでした。 式のたびに1ピクセルの透明gifにパスを渡す必要がありませんでした。どこかでそれを取り除くことができると疑っていました。 コードを最適化しながら、あちこちで式をひねりました。 そもそもsrcを設定しないようにしましたが、有害なIEは固定画像の上にアンロード画像のアイコンを表示しました。 すべての可能な修正が施された大量のサイト。 コードを別のhtc-shkuに入れようとしました。 そして、何らかの理由で画像を1ピクセルの幅と高さに設定しました。その結果、コミットされていない画像は1x1になり、固定化された画像は通常その横に表示されました。 私はそれを信じていなかったので、この1x1を削除してsrc = ""を設定する方法をさらに考え始めました。 私は喜びました、私の喜びは際限がありませんでした、私は何かをしました...そして私が修正を適用し始めたとき、それから...写真はスケールを止めました」。 コピーしたハフでは、sizingMethodの変更をコードに入力するのを忘れていたので、追加すると修正が機能しなくなりました。
私はそれが失敗だと思ったのです。それから私はすでにすべての人に私の美しい修正について伝えましたが、それは1つのファイルのみを必要としましたが、何かが私にとってうまくいった理由を考えて、sizingMethodには2ではなく3つの可能な値があり、このような「イメージ」プロパティもあります！ この値のドキュメントには、画像に合わせてコンテナの境界を拡張または圧縮することが記載されています。 しかし、そうではないことが判明しました！ コンテナ要素がpngよりも小さい場合、pngボックスは完全に表示され、コンテナ要素はその境界内に残ります。これは、幅と高さ= 1、src = ""を設定したときにまさに私に起こったことです。
だからここに私の修正のためのコードがあります：
* html .g-png24 {
behaviour:expression(
(!this.fixedPNG?
(function(el){
var fixSrc = "", sizingMethod = "crop";
if (el.tagName.toLowerCase() == "img") {
fixSrc = el.src;
sizingMethod = "image";
el.style.width = 1;
el.style.height = 1;
el.src = "";
}
else {
var tmpImg = new Image();
tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
sizingMethod = "scale";
}
fixSrc = el.currentStyle.backgroundImage.split('\"')[1];
el.className += " g-png-fixed";
}
el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + fixSrc + ", sizingMethod='" + sizingMethod + "')";
el.fixedPNG = true;
})(this):'')
);
}
* html .g-png-fixed {
background-image: none !important;
}
もちろん、マスターはマスターであり、このソリューションは99％のケースでのみ命を救います（そして、これらは私の99％のケースであり、すべてがあなたにとって完全に異なる場合があります）、ファイルを接続するだけで、原則的に人生を大幅に簡素化します修正を加えて、imgまたはdivに関係なく、必要な要素をクラス「g-png24」に設定します。 誰もがVitaly Kharisovのソリューション（imgでは1つの追加のラッパー要素を使用しますが）またはすべての人に知られているiePngFixを見つけることがもっと面白いと感じるかもしれません。