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を指定するとリンクとして認識しないんですよね（マウスオーバーは認識するのでテキスト文字色は切り替わる）。