IE6+透過PNG+Lightboxで苦労したのでメモ

画像を見せる際にLightboxを導入するケースはよくあります。

Lightboxがユーザビリティの観点から良いのかどうかは置いておいて、IE6対応で苦労したのでメモ。

利用したjQueryのプラグインは、「fancybox」です。IE6対応ですし、MITとGPLのデュアルライセンスで商用利用可でしたので。ちなみに、リンク先ページで紹介されている「fancybox2」は商用利用有料なので注意しましょう。

発生した現象

デフォルトの状態から、以下の部分をカスタマイズ。

  • デフォルトのLightboxの幅と高さを変更
  • Lightboxの背景全体に透過PNGで背景画像を指定
  • 余計な空のdivタグを生成されないように、該当箇所を削除

がっつりと手を入れたわけではなく、見た目上の調整をおこなった程度の変更です。

FirefoxやGoogle Chromeでは正常に表示・動作できました。次にIE6の表示・動作確認。表示は特に問題なし、Lightboxの枠外をクリックするとLightboxは閉じる。ただ、閉じるボタンをクリックしても動作せず……。

原因

Lightboxの背景全体に透過PNGで背景画像を指定したのが原因でした。

fancyboxでは、IE6で表示すると「fancybox-ie6」というクラスが付与されます。そのクラスにAlphaImageLoaderを指定することで透過PNGを表示できるようにしています。

背景画像を指定した時に、Lightboxの背景部分のdiv要素にも同じようにAlphaImageLoaderを指定しました。するとdiv内要素にaタグがあってもクリックできないようです。他の要素を選択することもできなくなったので、aタグだけでなく、div内要素の上に透明の要素が重なっているイメージです。どうしてこうなるのか、詳しい原因はわかりませんが、現象から考えるとこんな感じでした。

【参考】IE-winで透過PNGを利用する方法 – Archiva

あと、「AlphaImageLoader」を指定した要素が<a>タグを含む場合は注意しましょう。リンク領域がクリックできなくなる可能性があります。解決の鍵は「position: relative;」と「z-index」。たとえばAlphaImageLoderを指定した要素の内側に<div>でも作って指定してやれば良いでしょう。ただ残念ながら、全ての状況で有効な訳ではありません。隣り合い、重なり合うレイヤに対していろいろ試してみましょう。

解決策

AlphaImageLoaderを指定して透過PNGを表示できるようにするのではなく、IE6表示時は背景画像を透過GIFに変更しました。

透過画像が複雑な形ではなく影がなかったこと、Lightboxの枠外背景が黒に近い一色だったので、透過GIF作成時の調整で見た目に問題なかったことで、このようなシンプルな対応でできました。

上記サイトの解決策は試していません。fancybox自体が、様々な要素にpositionとz-indexを設定しているので、中途半端に変更するとそもそもLightboxが機能しなくなる可能性がありましたので。

透過GIF=ギザギザというイメージしかなったのですが、今回の件で透過GIFって使えるなと。というより、この方法をとれなかったら工数が格段に増えていた気が……。

公開:2013/02/15 | 更新:2013/12/16