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

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

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に含まれている場合もあります。

[amazonjs asin=”4844336355″ locale=”JP” tmpl=”Small” title=”Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法”]

IE7 バグ