2009年03月11日(水) 15:53 | posted by shin2 | Comments [0]

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

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;
}

[この記事へのトラックバックURL]
http://mujuu.org/weblog/web_memo/90/trackback

COMMENTs