jquery.pngFix.js で画像のサイズが大きくなるバグの解決方法

jquery.pngFix.js で以下のようにしてたら、突然画像が大きくなってボヤけてしまいました。

1
2
3
4
5
6
7
<script type="text/javascript" src="js/jquery.pngfix.js" charset="utf-8"></script>
<script type="text/javascript">
$(function($) {
	$("h3 > img").pngfix();
});
</script>
<h2><img src="images.png" width="66" height="18" /></h2>

実際に Javascript で書き換えられたソースを見てみましょう。

1
<span style='DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="images.png"); WIDTH: 82px; LINE-HEIGHT: 0; HEIGHT: 18px' jQuery1269915814671="10"></span>

背景にして AlphaImageLoader 使ってたんですね。きっとこの中の CSS がしっかり効いていないのでしょうか。いろいろ探ってるうちに、line-height が効いていないことが分かりましたよ。

なので、span 要素に大して、再度 line-height をかけてあげましょう。

1
2
3
h3 span {
	line-height: 0!important;
}

以前作った人の css が何か悪いことをしているのでしょう。span 要素や div などに大して直に何か指定されていたのかな。何はともあれ、IE シリーズは困ったちゃんですね。IE 作った人も困ったちゃんです。

コメント

  1. DesigNet » 透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモさんのコメント

    [...] jQueryをサイトで使用しているならこちらのプラグインもいいかもですね。 半透明ボックスに関するメモ 合わせて読みたい:jquery.pngFix.js で画像のサイズが大きくなるバグの解決方法 [...]