IE6にCSSで透過pngを適応させる。

shin2 — Wed, 11 Mar 2009 06:53:59 +0000

CSSで背景にpng画像を指定した時、Safari・Firefox・IE7などの新しめのブラウザでは問題なく表示される。が、まだ意外とユーザーがいるIE6（5.5以上）に適応したいと思うので、その方法をメモ。

一度、_background:none;で打ち消して、IE6（5.5以上）用に_filter:DXImageTransform.Microsoft.AlphaImageLoaderを追加。

セレクタ {
	background:url(back.png) no-repeat;
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='back.png',sizingMethod='crop');
}

AlphaImageLoaderのパラメーターは、

enabled／フィルターの有無 true or false。
sizingMethod／画像の表示の種類　cropはそのまま、scaleは要素の大きさにフィット。
src／png画像のURL。

■追記

コンテンツの背景などのブロックでAlphaImageLoaderを使うと、IEでリンクボタンやinputなどが無効になる。
CSSに下記を追加したら正常になりました。

セレクタ input, セレクタ a {
	position:relative;
}

MujuuLog » CSS

IE6にCSSで透過pngを適応させる。