Aタグで入れ子にした要素がクリックできない

ちょっと解決までハマった症状をメモ。
表題のとおり、aタグで入れ子にしたインライン要素をdisplay:blockと指定し、さらに幅指定すると、IE(IE6、IE7、IE8)でリンクの認識をしないという摩訶不思議な現象。

結論からいうと、ブロック指定したインライン要素に幅指定せず、親要素とのマージンで幅を調整すれば回避できた。
もう少し具体的な説明は以下

やりたい事

・リンクを設定した画像に、写真のようなフチどりをしたい。
・マークアップはシステムとの兼ね合いで以下の通り(タグ追加・削除など変更不可)

 <li><a><span><img>説明文</span></a></li>

・imgと説明文はセンター寄せとし、説明文はimgより折り返して開始とする。

最初に設定したCSS(IEでクリックできない)

a {display:block; width:100px}
span {display:block; padding:3px; border:1px solid #CCC; margin:0 auto; width:88px}
img {width:80px}

修正したCSS(IEでクリックできる)

a {display:block; width:100px}
span {display:block; padding:3px; border:1px solid #CCC; margin:0 6px}
img {width:80px}

原因は判りませんが、spanにwidthを指定するとリンクとして認識しないんですよね(マウスオーバーは認識するのでテキスト文字色は切り替わる)。

コーディングに関する記事

コメント