问题
i have a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
回答1:
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
回答2:
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
回答3:
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);
来源：https://stackoverflow.com/questions/8808643/how-is-it-possible-to-click-through-a-position-fixed-height-100-width-100