Blog

IE6で<a>タグを位置指定するとクリックできない問題

IE6以前のバージョンでは<a>タグに対してpositionで位置指定を行うと、<a>タグにdisplay:blockを与えていてもテキストの部分しかクリックできなくなる問題があります。
これがバグなのか仕様なのか、よくわかりませんが、このためサンプルのように打ち出しエリアの上に<a>タグをpositionで配置し、text-indentで画像置換(テキストを隠しす)するとまったくクリックできなくなります。

» サンプル

HTMLはシンプルだし、どうしてクリックできないんだろう?ってことになりますが、解決方法は全然簡単で、<a>タグの背景に透過GIFをはるだけでOKです。
簡単な問題ゆえに、どつぼにハマるパターンなのでメモ書き程度に残しておきます。

ちなみに<a>タグを<div>でラップして、<div>にpositionを与えても同じ症状がでるので、IEでは<a>を位置指定するには注意が必要なようです。

コメント&トラックバック

  • Trackback URL
  • http://www.indetail.jp/blog/css/920.html/trackback
  • Name
  • Web
  • Comment