TECH Matari

IE6でPNG画像のアルファチャンネルを有効にしようと思ったら、IEのみに存在するfilterプロパティのAlphaImageLoaderを使うことになる。まとめは以下のページにあります。

IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ

/* 通常ブラウザ向け */
div {
  background: url(hoge.png);
}

/* IE6向け */
* html div {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=hoge.png);
}

/* IE6向け */
* html div a {
  position: relative;
}

上記のまとめページでは最後のaタグに対する記述position:relativeは必須ではないと記載されているけど、filterプロパティを設定した後の要素にリンク等がある場合は必要なようだ（自分だけの現象なのかよく分からないけど…）。というかaタグのリンクだけでなく、フォームの要素となるinput、textarea、selectタグなどマウスでフォーカスする必要のあるタグに関しても必要になってくる。

aやinputなどそれぞれのタグにposition:relativeを指定する必要はなく、それらをラップしている親要素に対して指定すればいいのだけど、指定しないでいるとIEではリンク箇所でもマウスが反応してくれなくなる。

position:relativeを指定してしまえば、マウスでフォーカスできない問題は解決するのだけど、ドロップダウンメニューなどz-indexを指定し、重ねて表示を行う場合に問題が発生する。

重ねて前面に表示したいブロックの下にposition:relativeを指定したブロックがあると前面に表示したいブロックの方が下に潜り込んでしまうのだ。これではうかつにposition:relativeを指定できない。
ドロップダウンメニューの実装方法を変えてみたりしたけど改善できなかった。

上に記述した方法以外にもアルファチャンネルを有効にする方法はあるようだけど、それらは試していない。AlphaImageLoaderを使う時点で同じ結果になるような気がしないでもないし…。まあ、しかし、根本的に自分の利用方法・記述が悪いだけかもしれないという点も払拭できないでいる。

自分としてはテキストがのっかるような背景画像に、この方法はとらないようにしようと思う。不具合に関して検証しきれてないし…。なんかいい方法があればお願いしますです。

Popularity: 11% [?]

written by joy-pop