透過PNG(PNG-24)をie6で表示

Tweet

Pocket

透過PNGをie6で表示する方法のまとめ

• ieのfilterプロパティを使う
• javascriptライブラリを使う

IE6のfilterプロパティ(CSS)

問題点 : 内包するリンクが機能しなくなる。

div#hoge {
	background: url(×××.png) repeat-x;
}
* html div#hoge {
	behavior: expression(
		this.style.behavior || (
			this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
			this.style.backgroundImage = "none",
			this.style.behavior = "none"
		)
	);
}

IE PNG Fix v1.0 / 2.0 Alpha 3

利点:IE6のfilterプロパティを利用した際に発生するリンクの問題が起こらない。
注意点:backgrund-positionには対応していない。

»IE PNG Fix v1.0 / 2.0 Alpha 3

jquery.pngFix.js

» jquery.pngFix.js