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 に代わって愛用させていただきたいと思います！

この記事が最後に更新されたのは 2008年04月22日 18:37 です。

このページの先頭へ戻る

コメント(4)

  1. YungSang

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

  2. 石澤 りん

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

  3. YungSang

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

  4. 石澤 りん

    お知らせありがとうございます。
    早速差し替えてみました。
    1.0.7 から 1.1.0 で問題なく表示されております。

コメントをどうぞ

（公開されません）

トラックバック(0)

この記事は p15.jp の IE 6 で透過 png を表示する「PNG-TR」 です。
関連が低いと判断したトラックバックは予告無く削除させていただく場合がありますのでご了承ください。

トラックバックはありません

p15.jp について

ナビゲーションを表示する

このページの先頭へ戻る