mania-ku

何か作りたいプログラマ未満。

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

IE7でaの中のspanがクリックできないことがあります。状況としては下記のようなときです。

  • ・spanがdisplay: block;のときはクリックできない。
  • ・spanがdisplay: table-cell;(display: inline;zoom: 1;)のときはクリックできない。
  • ・spanが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;
}

参考:IE7-/Win: Not clickable image in a link (caused by hasLayout)

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;
}

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

親にposition: relative;がかかっていないか調べてください。
※入ってないなぁと思ってもclearfixに含まれている場合もあります。

Pocket
LINEで送る