これは凄い!IE6/7の透過PNGのバグをサイト側で簡単に直すiepngfix

Internet Explorer 6 と 7にはフルカラーの透過PNGが正常に表示できない不具合があります(IE7は部分的)


以前の記事で透過PNGをIE6で表示できない問題について取り上げましたが、内部的にScriptをいじるので、他のブラウザにも影響がある可能性がありました。

しかし、IE PNG Fix を使うと、サイトに1行スタイルシートタグを書いてファイルを2つ置いておくだけで、他のブラウザに全く影響を与えることなく、表示ができるようになるのです。

まず、iepngfix.zipを解凍して、中から blank.gif/iepngfix.htcを自サイトに転送します。

次に、サイトのCSSに

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

のように記述すればOKです。

IMGやDIV以外の A / INPUT タグにも使用する場合は、追加します

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

サブフォルダに blank.gif がある場合は、iepngfix.htc のIEPNGFix.blankImg を編集します。

IEPNGFix.blankImg='/blackwingcat/blank.gif';

ちなみに、フォルダ名やドメインに日本語が入っていると正常に動作しないのでご注意を。

サンプルのiepngfix.html を開くとIE6のデモを見ることができます。

関連サイト:
IE PNG Fix - TwinHelix

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です