IEでアルファチャネル透過PNGを正常に表示させる・・・その後

導入してから気になっていたけど、メールとプリンタのアイコン。他にもあるけどトップページに表示されるので目に付く。なにが目に付くのかというと、数ドット間延びしてしまっている。どうしてこうなるのか探っていたが、どうやらJavascriptに問題があるようだ。中で何をやっているかというとIMGタグをすべてSPANタグに置き換えてDirectXで処理したものを表示している。

置き換えられたコード

なぜ間延びしてしまうかというと、IEの場合１文字もない場合でもこのタグに指定されているフォントのサイズよりも小さいサイズにはできないのがそもそもの原因らしい。おまけにsizingMethod='scale'が指定されているので拡大されてしまっている。この条件が重なり合って間延びした気持ち悪い画像が表示されている。

解決するにはいくつか方法がある。
１．IMGタグに戻す
２．sizingMethod='scale'を取り除く
３．font-size:0;を挿入する

やはりまずIMGタグのまま使用できればそれに超したことはないので１の方法から試してみた。しかしどうにもうまくいかない。なぜか左の画像のようになってしまう（笑）これではさすがに使い物にならないので、残る手段は２か３ということになる。２の場合はそのものを取り除くだけなので楽なのだが、画像の高さと「ないテキスト」の高さが違うため空白部分ができてしまう。このためそれを意識したレイアウトにしないと崩れてしまう可能性があるのでやめた。そこで結局３のfont-sizeを0にするのが一番無難なので３の方法で表示させることにした。
ところがこれでも問題があることがわかった。元々のIMGタグにpaddingが指定されていると、これまた伸びてしまう。そこでsizingMethodについて調べてみるとimageという値にしてやれば要素のheightやwidthに関係なく要素を画像の大きさにあわせてくれるらしいので、最終的にその方法にした。

pngfix.js 35行目
            + "(src='" + img.src + "', sizingMethod='image');"></span>"

IMGタグをすべてSPANタグに置き換えているのでSPANタグ全体に適用されるスタイルがある場合その影響を受ける。注意しておかないとツボにハマりそうだ。

透過PNGの対応

なんてこったい！（透過PNG）