画像の一部にリンクを貼りたい場合、ありますよね。
今回、画像の上に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のクセを覚えておけば似たようなケースもすぐに対応できそうですね。

【jQuery】指定位置でスクロールを固定するプラグインが動かない
【WordPress】カスタム投稿タイプでブログを複数追加
【BGM】ピアノをフィーチャーした美メロ 18選
[iPhone7]ケースは格安の海外通販で買おう
【紙のお仕事】テクノイベントのフライヤー&チケット制作
【Webデザイン】美容系LPを制作しました
脱・ブログが続かない人
クリスマスの思い出 1988
【WordPress】プラグインを使わずに関連記事を表示
【WordPress】アイキャッチ画像を自動で切り抜き・リサイズ
どうして制作会社は料金が高いのか
【CSS】borderをwidthの幅に含める小技