前回、windows IE 5.5 / 6 でもアルファチャンネル付きpngファイルを透過表示する方法を取り上げました。

IEに実装されているフィルター機能alphaImageLorderを利用して、winIEでも半透明のpngを表示できるのですが、この方法で背景画像を貼り込んだブロック要素内ではリンクがクリックできない状態になってしまいます。 リンク同様、フォームのテキストエリアやボタン。スクロールバー等もクリックあるいは選択ができなくなました。どうもalphaImageLoaderは画像を背景に表示するのではなく、ブロックの手前に表示しているようです。

解決方法として、alphaImageLoaderで背景指定した「ブロック要素A」に内包される「ブロック要素B」を用意しposition: relative;を指定。ブロックB内にリンクを指定した要素を配置することで正常にクリックできるようになりました。

html:

<div>
  <div>
    <a href="http://example.com/">リンク</a>
  </div>
<div>

css:

#blockA {
  width: 180px;
  height: 180px;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod=scale);
}
#blockB {
  position: relative;
}

IE5.5/6のみを対象としてしまうならこれでもいいのですが、実際にこのままではwinIE 5.5/6以外のブラウザでは背景画像がない状態になります。 私の場合は条件付コメント(Conditional Comments)を利用して、すべてのブラウザに対しては普通に背景画像として透過pngを指定したcssファイルを、IE5.5/6には別ファイルのCSSを読み込ませています。

<!--[if gte IE 5.5000]>-->

</div></div>

[`tweetmeme` not found]