iepngfix.js使ってみました。

ブログの更新を忘れていた、んぼです。
さいきんわすれっぽいのです。

さてさて、コーディングアヒャーな日々なわけですが、仕事上どうしてもpngファイル使わないといけない場面が出てきました（まあ無理矢理jpgでもいけなくもないんですが）。
ご存知の通り、透過PNGはIE6では未対応です。
IE8が出てきて久しい昨今ですが、まだIE6を使っている人も多いわけで……当然、透過PNGを使わなくて済むデザインに縛られてしまいます。
ただしIE6に対応させればいいだけなら、filterプロパティを使えば解決出来たりしますね。

*html [PNGを表示したいセレクタ]{
background-image: none;/*ここで背景画像を消去*/
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=[PNGファイルの”htmlから見た”パス]);
}

IE7は普通にPNGを表示してくれるので、IE6だけ振り分けたらいいならスターハックが有効です。
これでIE6でも透過PNGを表示出来ますが……悲しいかな、background-positionもbackground-repeatも利きません。
表示は常に左上、リピートはしてくれません。
これはfilterプロパティの仕様で、そもそもbackgroundを制御するスタイルではないためですね。
（なので、background-imageと同時に表示出来ます）
単発で表示させるのならまあこれでも使える場面はあるのですが……今回はボックスサイズの確定されないドロップシャドウに使いたかったわけですよ（´・ω・｀）
しょうがないので（自分は使いたくない方なんですが）IE6で透過PNG表示に対応したライブラリを探すことに。
IE7.jsやIE8.jsは定番なんですが、PNGファイルをリネームしないといけないことと、background-repeatやbackground-positionに対応していないこと。
意味ねーよそれじゃ！（゜д゜）
次に候補であったiepngfix.jsを使ってみることに。
一応、「CSSはそのままでおｋ」、「リネームの必要もなく、普通に使える」とのことで、導入してみたんですが。

元のソースは、width: 540pxのボックスに、高さ1px、幅20pxのpngファイルを、こういうふうに指定していました。

#box{
width: 540px;
min-height: 100%;
margin-top: -160px;
background-position: 510px 0px;
background-repeat: repeat-y;
background-image: url(../image/image.png);
}

つまり、「右から30pxの位置から縦方向に横幅20pxの画像を並べて表示」です。
Firefox3を始めとしたモダンブラウザではちゃんと意図どおりの表示をしてくれますが、iepngfix.jsを適用したIE6だと、ボックスの左端から右端まで、pngファイルをビヨーンと引き伸ばして表示されてしまいました。
どうも……相変わらずbackground-positionは無効になる上に、勝手にボックスサイズにフィッティングされてしまうようです（´-ω-｀）
見た目上はrepeat-yは利いているように見えましたが、コレも多分引き伸ばされただけじゃないかなーと。
まあ1pxの同一パターンなんで、引き伸ばされようが繰り返されようが違いなんてないんですが。

うーん、なんかいいライブラリないかなー（；´д｀）