在低版本 IE 中点击空 block 元素的问题

2015-07-24 浩阳 更多博文 » 博客 » GitHub »

IE CSS 兼容性 HTML

原文链接 https://gaohaoyang.github.io/2015/07/24/low-IE-click-empty-block-bug/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

  • content {:toc}

问题描述

当我们点击一个空的、没有任何内容的 div 或者其他块级元素时。在 IE11 以下，是没有反应的。

使用场景

这类问题使用场景还是很普遍的。比如 UI 给了一张大图，要点击图上的某一块位置的时候。可以用一个空的 div 定位到相应的位置，然后对它进行绑定事件。

解决办法

解决方法很简单，即给这个块级元素填充任意颜色，然后将其透明度设置为0。代码如下：

background-color: #fff;
opacity: 0;
filter:alpha(opacity=0);