IE7でaの中のspan がクリックできない

IE7だけaの中のspanがクリックできない

• display: block;のときはクリックできない。
• display: table-cell;（display: inline;zoom: 1;）のときはクリックできない。
• display: inline;ではクリックできる。

解決策

aの外側をhasLayout: trueにし、spanをposition: relative;z-index: -1;にする。

display: block;のとき

/* HTML */
<ul class="clearfix">
    <li><a href="http://jsdo.it"><span class="pic"><img src="http://dummyimage.com/200x150/000/fff" alt=""></span><span>クリックできない</span></a></li>
</ul>

/* CSS */
li a span {
    display: block;
}
↓
li a span {
    position: relative;
    display: block;
    z-index: -1;
}

デモ：http://jsdo.it/Ituki/agn4
参考：http://www.brunildo.org/test/IEaL.html

display: table-cell;（display: inline;zoom: 1;）のとき

/* HTML */
<ul>
    <li><a href="http://jsdo.it/"><span><img src="http://dummyimage.com/50x50/000/fff" alt=""></span><span>クリックできない</span></a></li>    
</ul>

/* CSS */
li {
    margin-top: 5px;
    list-style: none;
}

li a span {
    display: table-cell;
    /display: inline;
    /zoom: 1;
    vertical-align: middle;
}
↓
li {
    margin-top: 5px;
    list-style: none;
    /zoom: 1;
}

li a span {
    position: relative;
    display: table-cell;
    /display: inline;
    /zoom: 1;
    vertical-align: middle;
    z-index: -1;
}

デモ：http://jsdo.it/Ituki/aQhn

おまけ。display: block;のときにbugfixしてもクリックできないときは・・・

親にposition: relative;がかかっていないか調べる。
※clearfixに含まれている場合もある。
デモ：http://jsdo.it/Ituki/agn4