pngfix

IE6用透過png対策をしようと思っていろいろ見ていたら、手法として大まかに2つあるみたいで

1.cssのfilterを使う
2.javascriptのライブラリを使う

最初は1を使おうかと思っていたんだけど、いろいろと問題もあるようで、めんどくさかった。
たとえば、指定したimgをaタグで囲っていると、リンクが効かなくなるとか、ie6用cssハックを多用しないといけなそうとか。

方向をシフトして2で調べていたら、jQueryのpngfixってプラグインを発見した。
http://www.campbellsdigitalsoup.co.uk/about/png-fix/

おお、いいじゃん、これ。
ただ、img要素全部にやるとめんどくさそうなのでクラス指定で使いました。
こんな感じで、pngfixクラスのimgタグに適用。

<!--[if lte IE 6.0]>
<script src="/javascripts/jquerypngfix.js?1268773256" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {jQuery("img.pngfix").pngfix();});
</script>
<![endif]-->

ただ、やっぱり微妙にレイアウトが崩れた。
たぶんimgタグをとっぱらって、背景として扱う感じになっているんだと思う。
あと、リンクもちょっと変。
そこら辺は感じ取ってハックで修正が必要かもしれません。