背景画像の IE6 の PNG 透明度バグを修正するにはどうすればよいですか?
Darth
質問する
11403 次
12 に答える
20
少し前にDavid Cilleyによって書かれたこの Javascript ソリューションが気に入っています。準拠ブラウザの邪魔にならず、必要なバックエンドで使用できます。ただし、空白の gif 画像が必要です。
これらの関数を HTML ヘッダーまたはその他の既存の .js インクルードに追加します。
<script type="text/javascript">
function fixPngs(){
// Loops through all img tags
for (i = 0; i < document.images.length; i++){
var s = document.images[i].src;
if (s.indexOf('.png') > 0) // Checks for the .png extension
fixPng(s, document.images[i]);
}
}
function fixPng(u, o){
// u = url of the image
// o = image object
o.src = 'images/spacer.gif'; // Need to give it an image so we don't get the red x
o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
}
</script>
次の条件付きコメントを下部 (フッター セクション、 </body> の直前) に追加します。
<!--[if lte IE 6]>
<script language="javascript" type="text/javascript">
//this is a conditional comment that only IE understands. If a user using IE 6 or lower
//views this page, the following code will run. Otherwise, it will appear commented out.
//it goes after the body tag so it can fire after the page loads.
fixPngs();
</script>
<![endif]-->
IE6 の奇妙さに対するより包括的なアプローチについては、IE7 Javascript ライブラリを試してください。
于 2009-03-30T15:40:25.190 に答える
8
PNG 動作を使用します。
ie6.css:
img {
behavior: url("pngbehavior.htc");
}
page.html:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
于 2009-03-30T15:35:31.770 に答える
8
これを使用してください: http://www.twinhelix.com/css/iepngfix/
これは IE 5.5 にも適していますが、Mac バージョンの IE または以前のバージョンの IE には適していません。
かなりの数のサイトで使用しましたが、問題はありませんでした。
ただし、スクリプトが開始されるまで、PNG の周りに醜い灰色のボックスが表示されることがあります。
于 2009-03-30T15:25:56.830 に答える
3
ここでネクロマンサーのバッジを取りに行きます。:)
これは正確な修正ではありませんが、追加のコードをまったく使用せずに IE6 で透過性をサポートするために時々使用している便利な回避策です。常に法案に適合するとは限りませんが、かなりの場合に適合します。
とにかく、ほとんどの場合、固定色の背景で PNG を表示する必要があるという考えです。PNG ファイルには背景色を指定でき、IE6 はそれを尊重します。あなたがすることは、TweakPNGユーティリティを入手して PNG ファイルを開くことです。bKGDそこで、目的の背景色を指定するチャンクを追加できます。PNG を表示するために必要な色を入力するだけで完了です。
1 つの注意事項 - PNG ファイルには、さまざまなディスプレイ デバイスを補正するための値が含まれていることがよくあります。意図された色空間、色度、ガンマなどがあるかもしれません。これらはそれ自体は悪くありませんが、IE はどういうわけかそれらを誤って解釈し、その結果、PNG は本来よりも暗く表示されました (または IE が正解したのは誰ですか?覚えていません...)
とにかく、すべてのブラウザで同じように PNG を表示したい場合は、上記のユーティリティでこれらのチャンクを削除する必要があります。
于 2009-12-13T22:52:33.503 に答える
2
twinhelix png fixが役立つはずです
于 2009-03-30T15:26:20.310 に答える
2
于 2009-03-30T15:26:57.610 に答える
2
私が取り組んでいるプロジェクトで私がやっていることは、Paul Irish のHTML5 Boilerplateからヒントを得て、条件付きスタイルをページ全体に割り当てることです。ここで詳しく説明していますが、簡単に言うと、サイトのすべてのページの HTML に条件付きチェックを追加し、body タグに適用するという考え方です。そのようです：
<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->
IE ブラウザーはこれらのコメントを読み取り、それらのスタイルを適用します。他のブラウザは無視します。これの天才は、標準に準拠したWebサイトを設計したり、PNGを使用したりできることです. 次に、CSS で、標準スタイルの後に追加のスタイルを追加して、IE ブラウザーに必要なものを提供します。たとえば、私が取り組んでいる 1 つのスタイルでは、PNG 背景画像を使用しています。ie6 でこのプレイをうまく行うには、javascript/htc を使用してそれらを置き換え、そこにある多くのハックの 1 つを適用することができます。または私はこれを行うことができます：
.someStyle {
background: url(/images/someFile.png) no-repeat;
background-position: -0px -280px;
}
.ie6 .someStyle {
background: url(/images/someFile.gif) no-repeat;
background-position: -0px -280px;
}
私の ie6 ユーザーに GIF を提供することで、CPU を占有する回避策プロセスがなくなります。これは、ie6 を実行している可能性が高い種類の POS マシンでテストしたことがある場合、実際には非常に大きな問題です。そして、素敵なブラウザーを持つ素敵なユーザーのために、私は品質をあきらめませんでした.
2 つの別個のファイルが必要ですが、ほとんどの実装よりもはるかにクリーンな実装だと思います。また、個別の ie6.css ファイルの代わりに、.ie6 .whatever を使用すると、修正が適用されるスタイルのすぐ隣に保持されます。これは、よりクリーンで使いやすいと思います。また、デザインを完成させて恐怖で振り返るのではなく、進むにつれて ie6 ユーザーを考慮することをお勧めします。
于 2010-12-15T17:15:05.357 に答える
2
1. ドキュメントの head ブロック内に IE6 用の条件付き CSS を追加します。
<!--[if (IE 6)]>
<link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->2.要素にクラス名を割り当てます。
<td class = yourClassName>
3.ie6.css でフィルターを適用します。幅と高さを指定する必要があります。背景画像を clear.cache.gif に設定すると、これらのプロパティがないとフィルターは機能しません。
.yourClassName{
width:8px;
height:22px;
background: url("locationOfBlankImage/clear.cache.gif");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}
于 2010-03-16T22:26:35.767 に答える
2
AlphaImageLoader 変換がIE6 をデッドロックする可能性があることに注意してください。
通常の PNG32 の代わりにPNG8を使用します。256 色と 1 ビットのアルファ透明度に制限されていますが、ブラウザーがランダムにデッドロックすることはありません。
于 2009-04-03T17:27:20.090 に答える
1
これは、この問題に関する素晴らしい記事です。要約すると、SuperSleight と呼ばれる JS ライブラリを提供します。私は過去にかなりの成功を収めてそれを使用しました。
于 2010-03-16T22:32:41.333 に答える
1
わかりました、私は html/js にほとんど慣れていませんが、2 つの問題を修正するために、Rob Allen の回答を少し変更する必要があったと思います。
- AlphaImageLoader() が画像の縦横比を変更していたため、画像が読み込まれた後に元のサイズを復元する必要がありました。
- fixPngs() が html の最後から呼び出された場合、ドキュメントがロードされた後、すべての画像がロードされる前に呼び出されていました。
そこで、イベントを添付するように fixPngs() を変更しました。
function fixPngs() {
// Loops through all img tags
for(i = 0; i < document.images.length; i++) {
var u = document.images[i].src;
var o = document.images[i];
if(u.indexOf('.png') > 0) {
o.attachEvent('onload', fixPng);
o.src = u;
}
}
}
fixPngs() はまだ html の最後から呼び出されています:
<!--[if lte IE 6]>
<script language="javascript" type="text/javascript">
// Do this after the page loads
fixPngs();
</script>
<![endif]-->
fixPng() は呼び出し元を取得し、イベントを切り離し、元のサイズを保存し、AlphaImageLoader() を呼び出して、最後にサイズを復元します。
// u = url of the image
// o = image object
function fixPng(e) {
var caller = e.target ||
e.srcElement ||
window.event.target ||
window.event.srcElement;
var u = caller.src;
var o = caller;
if(!o || !u)
return;
// Detach event so is not triggered by the AlphaImageLoader
o.detachEvent('onload', fixPng);
// Save original sizes
var oldw = o.clientWidth;
var oldh = o.clientHeight;
// Need to give it an image so we don't get the red x
o.src = 'images/spacer.gif';
o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";
// Restore original sizes
if(o.style) {
o.style.width = oldw +"px";
o.style.height = oldh +"px";
}
}
私はそれをやり過ぎましたか？
于 2013-08-28T17:52:32.780 に答える