Question

在所有浏览器（例如Firefox，Chrome，IE9）中，点击我的叠加层会触发我的onClick功能。但是，在IE8中，就好像该框不存在它不可点击的方式，而后面的内容就是。这是我的代码：

HTML：

<div id="pageblock" onclick="closelogin()"></div>
<div id="loginbox"><!--This is where my form is--></div>

CSS：

    #loginbox{
        z-index: 10;
        position: absolute;
        height: 83px;
        top: 105px;
        right: 20px;
        width: 400px
        overflow: hidden;
        padding: 5px;
    }
    #pageblock{
        display: none;
        position: fixed;
        z-index: 7;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
    height: 100%;
    width: 100%;
    }

IE8及更早的CSS：

#pageblock{
    background: transparent !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}

谢谢！

Answer 1

正如您已经确定的那样，错误源于使用-ms-filter。似乎应用过滤器的行为改变了浏览器计算宽度和高度的方式，因此可点击区域缩小为页面块div中的文本，而不是整个div本身。

最简单的解决方案是使用背景图片：小的5px x 5px 60％透明黑色.png工作正常，将为您的整体页面大小增加最小的占用空间，从IE7向上提供浏览器支持，并将不会覆盖您为pageblock设置的宽度/高度声明。

我发现您发布的代码存在许多其他问题;你应用的z-indexing意味着登录框将显示在pageblock的顶部（这是故意的吗？）。此外，您已指定登录框应显示在页面右侧20px，但您已经给它宽度为100％。计算总宽度为100％+ 20px，宽度超出页面显示的宽度。尝试并避免混合测量单位 - 或者根据百分比进行正确的位置，并从宽度声明中扣除它，或者以像素为单位指定登录框的内容。从长远来看，你会为自己省去很多麻烦。

在IE8中覆盖不可点击

1 个答案: