IE 6のimgタグで透過PNGを機能させる

StackOverflow https://stackoverflow.com/questions/1024644

  •  06-07-2019
  •  | 
  •  

質問

IE 6では動作しない透明な背景のpngがあります。その画像を使用しているいくつかのimgタグをDIVに置き換え、CSSで使用することで問題を回避しています：

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

これに関する問題は、alt属性とtitle属性が失われるため、サイトにアクセスしにくくなることです。上記のCSSでimgタグを使用すると、正しい画像が表示されますが、画像を表示できない場合にIEが表示する大きな「X」が表示されます。

IMGタグで透明度を正しく表示することでIEを動作させる方法に関する提案はありますか？

役に立ちましたか？

解決

DIVタグを引き続き使用できる方法の1つは、DIV要素内に2番目のSPANタグを配置し、その中にALTの値を配置し、ページから外れないようにスタイルを設定することです。 。たとえば... 

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

この場合、HTMLは次のようになります... 

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

タイトルタグは引き続きDIVで機能するため、その部分で問題ないはずです。

（display：none;のように）テキストを単純に隠すことはできないと思います。スクリーンリーダーはそのルールを尊重するからです（読んでいない場合など）

他のヒント

ie6でJavaScriptを使用して透過性を有効にできます。あなたが見つけることができる多くの例があります。ここに私が使用したものへのリンクがあります。

http://jquery.andreaseberhard.de/pngFix/

別のオプションはie6にhtcを使用することです-解決策についてはこちらをご覧ください：

http://www.twinhelix.com/css/iepngfix/

cssファイルに追加された行のみが必要です-申し訳ありませんが、javascriptが必要な場合があります-確かではありません。

数か月前、この問題を解決するために小さなjavascriptツールを使用しました。 Unit PNG FIX という名前で、非常に使いやすいです。

ここで誰かがこのためにJS実装を提供しましたが、このソリューションはFFや他のブラウザでも実行されます。より良いアイデアがあります。たとえば、MSテクノロジーを使用します：）

そのうちの1つは、HTC（私が誤解していない場合、ハイパーテキストコンポーネント）と呼ばれるものを使用します。それは…行動のためのCSSのようなものです。実際には、CSSセレクターにいくつかの関数を添付できるXMLファイルです。繰り返しますが、MSのみのテクノロジーです。

要するに、このサイトにアクセスしてください： http://www.twinhelix.com/css/iepngfix/

これをdrupalモジュールと一緒に使用していますが、とてもうれしいです。あなたが疑問に思っているなら、これはモジュールです： http://drupal.org/project/pngbehave

注：これはIEテスターでは機能しません： http://www.my -debugbar.com/wiki/IETester/HomePage IE6サイトをテストするために、Windows 2000とIE6（知っている必要がある場合はvmwareで実行）を使用しています。

IE6はPNG-8透明度をサポートしていますが、PNG-24はサポートしていません。 「修正」するお気に入りのツールの1つIE6は IE8.js です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top