Question

我有一个错误，我正试图缩小范围，并证明它是一个doozie。我正在进行模态叠加，在IE8中由于某种原因我可以点击“直通”，聚焦输入并选择它下面的文字。

在IE9，FF，Chrome中，一切都按预期工作。不幸的是，我打了一个减少的测试用例（如下所示）在IE8中工作得很好。以前有没有人碰到这个bug？希望能节省一些时间。谢谢！

<!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>

Answer 1

问题确实是当div的背景透明时，IE允许点击流血。对我来说，这无处不在：

只需使用1x1像素透明GIF的base64编码作为背景，这将停止所有点击/点击（也在IE9和IE8上测试）。另外，这是纯CSS，不需要额外的图像。

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

Answer 2

此问题的根本原因是IE不会将半透明背景视为有效的点击目标，因此点击会传递到下方的元素。

对于IE，您必须具有纯色背景或背景图像才能获得元素捕获点击。正如您所发现的那样，过滤器将不起作用。

常见的事情是使用1x1透明GIF作为IE的背景图像。然后该元素将适当地捕获点击。

Answer 3

想通了，我使用的是rgba（）而不是不透明度，因为我只需要背景来保持透明度。

对于IE，它使用-ms-filter生成梯度过滤器，这导致了问题。结束了只是使用

background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);

怎么可以点击一个位置：固定;身高：100％;宽度：IE8中100％覆盖？

3 个答案: