IE 下背景透明的空白元素无法触发 click 和 hover 事件【转】

这个标题可以解释为：

样式如下：

.item {
    background: transparent;
    width: 100px;
    height: 35px;
}

结构如下：

<div class="item"></div>

然后，这个 item 在 IE 6、IE 7 和 IE 8 下将不响应点击或鼠标滑过事件，IE 9 正常。

还有一个行为，当该 item 内有文字时，仅在文字上方响应 click 和 hover 事件，在 div 100px 宽度的空白地方，仍然不响应这两个事件：

<div class="item">文字</div>

在 MSDN 上没找到相关的说明，倒是看到了一条社区评论：Trapping mouse events on transparent Input elements or Textareas in IE，说的大概是类似的问题。

解决办法？

1. 为该元素设置背景色，不过不是很靠谱的解决办法，如果可以这样，为什么还要设置 transparent 呢？当然，如果你是误设置，加上背景色就可以解决；还有一哥们有个 2B 的解决办法，可以参考：Workaround: Can Not Click or Hover Transparent Links/Elements in Internet Explorer IE6, IE7, IE8
2. 为该元素设置背景图片，透明的 gif 等等，比如常见的就是 1x1 的透明 gif。上面的社区评论中也说到了这种解决办法，不过他直接使用了 background-image: url(.) 这样的代码来 hack 了，不清楚具体是否会有影响，如 404 请求？（实测发现在 IE 和 Chrome 下均会导致页面重复加载，不建议使用这样的 hack）

综合考虑，推荐第二种，我也准备采用第二种办法来解决了。