Dec 25, 2013

画像の一部にリンクを貼りたい場合、ありますよね。

今回、画像の上にposition:absolute;で空要素を置いてリンクを貼ったらInternetExplorerだけカーソルを乗せても反応しないという問題が。さすがFUCK IE。


画像の赤い部分にリンクを貼っているのでカーソルを置くと指マークに変わるはずですが、IEだけピクリとも動きません。

空要素を空でなくすことで解決!

これはIEが空要素を本当に空っぽだと認識してしまうことによって起こる現象。つまり何かしら要素を存在させればリンクイベントがちゃんと発生するということです。

そこで空要素に背景色を敷いて、それを透明にすることで見えなくするという手段が有効になります。
.button a {
    display: block;
    width: 50px;
    height: 20px;
    bottom: 10px;
    left: 50px;
    text-indent: -9999px;
    background: #fff;
    opacity: 0;
    filter: alpha( opacity=0 );
}

気付いてしまえばなんてことのないチョロい落とし穴なんですが、時間が無い時なんかは焦ってムダに時間を浪費してしまうもの。IEのクセを覚えておけば似たようなケースもすぐに対応できそうですね。


サイト内検索
  • Author

  • Twitter

      Follow @jay0926 ( followers)
    1. Facebook