position:absoluteで配置した空のdivに対して、clickイベントが反応しない（IE）

trouble-memo
Posted : 2018.3.17
Update : 2018.3.17

空のdivをクリックさせるということは普段記述しないのですが、
何かの案件の時にはまったらしく、2015年のメモに参考サイトが残っていました。

下記のように、幅、高さを指定した空のdivをposition:absoluteで配置し、
その要素に対してjQueryなどでclickイベントで何らかの処理を加えようとしても、
IEで反応しませんでした。

IE10で現象を確認しています。

/*sample-css*/
.box{
   width:200px;
   height:100px;
   position:absolute;
   top:100px;
   left:0;
}
<!--sample html-->
<div class="box"></div>
//sampleJs
$(".box").click(function () {
  //何かの処理
});

解決法

http://gerolian.xyz/2013/11/27/919/
https://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie

私の場合は（懐かしの）spacer.gif　を背景に指定して対応しました。

<div class="box" style="background:url(spacer.gif);"></div>