IE 6 で透過 png を表示する「PNG-TR」

以前から IE 6 で透過 png を表示したいときに愛用していた iepngfix.js がバージョンアップしていました。

私的注目機能は iepngfix.js だと png 画像が要素のサイズに合わせて拡大・縮小されていたのですが、PNG-TR では behavior の指定方法が 3 種類 (後方互換も含めると 4 種類) 用意されており、画像のサイズを維持して表示することもできます。

何ができるようになったのかというと、例えばリストアイコンとか要素のサイズは横幅いっぱいだけど画像サイズは 15 x 15 なんていうとき、iepngfix.js では無惨に拡大された画像に胸を打ち砕かれ諦めるしかなかったのですが、PNG-TR を使うとハッピーターンを 10 袋大人買いしたようなうれしさでいっぱいになりますヽ(・ω・)ノ

但し、できないこともいくつかあって、background-repeat や background-position は効かないし、PNG-TR で指定した要素が position: relative; もしくは position: absolute; だった場合はその子孫要素でリンクが効かなくなってしまいます。
詳しくは Notes(注意/制限事項) – PNG-TR | Google グループ に書かれています。

例えばヘッダの背景を透過 png にしよう!ヘッダ内の要素のレイアウトには position: absolute; を使うよ!なんてときは #header { position: relative; } などとして基準の位置を定めたりしますが、このままではリンクが効かないのでヘッダの position は指定せず、ヘッダ内の要素は float や margin などで工夫してレイアウトする必要があります。

IE 6 のためにそこまで頑張る必要はあるの?って話は置いといて、まだまだ完全に切り捨てることのできない IE 6 対策として iepngfix.js に代わって愛用させていただきたいと思います!

「IE 6 で透過 png を表示する「PNG-TR」」への4件のフィードバック

  1. ご試用ありがとうございます。
    何か問題がありましたら、いつでもご連絡下さい。
    これからもよろしくお願いします。

  2. コメントありがとうございます!
    リンクが効かなくなる場合の対策がちょっと大変ですが愛用させていただいておりますヽ(・ω・)ノ

  3. 微妙なタイミングなってしまいましたが、本日 v1.1 をリリースしました。
    よろしければ、こちらもお試し下さい。

コメントを残す

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