1. HOME > 
  2. ブログ・お知らせ > 
  3. 備忘録 > 
  4. 備忘録「IE6でPNGの背景画像をホバーするとずれる」

ライラックミモザのブログ・お知らせ

2012年3月4日

備忘録「IE6でPNGの背景画像をホバーするとずれる」

IE6で透過PNGを使うとき、どのJavaScriptを使用していますか?
私はデジハリへ通っていた頃に、偶然、居合わせた通りがかりの講師の先生に教えていただいた「DD_belatedPNG」をずっと使用しています(←逆をいうと、このライブラリ以外使用したことがありません)。
とくにクセもなく、導入も簡単なので、便利なのですが、先日、不思議なバグに出会いました。

そのバグとは、
IE6で背景画像として使用しているPNG画像をホバーすると、ホバー時の画像がずれる!
というもの。
私はよくグローバルナビを画像で実装するとき、1枚絵として切り出した画像を、<a>タグの背景画像として使用し、ホバー時はCSSでその1枚絵の表示位置を変える手法を利用しています。
ただ、透過PNGはIE6で使用する場合、上記のように何らかのJavaScriptを使用しなければきちんと使えないので、ちょっと手間がかかるということもあり、もともとPNG画像を使うシーンは意図的に限っていました。
記憶をたどると、PNG画像をグローバルナビに使用したことは、今回までなかったかもしれないだけに、はじめて出会ったバグだったのかもしれません。

どうやら原因は、
<a>タグの背景画像として、PNG画像を使用する際、<a>タグの高さ(height)が奇数だと、ホバー時に画像が1px余分に動いてしまい、画像がずれたようになり、高さを偶数にすると、解消される
というもののようでした。
参考にさせていただいた記事は、「『DD_belatedPNG』IE6で1pxずれる解決方法」です。
ありがとうございます。
このバグが、IE6独自のものなのか、DD_belatedPNGとIE6の相性によるものなのかは、私自身わからないのですが、上記の記事にあるように、まさにそのとき、私が指定していた<a>タグの高さは奇数だったので、即、偶数に修正すると、この奇妙なバグは解消しました!

ブログ・お知らせトップへ