0

在所有浏览器（例如 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);
}

谢谢！

4

1 回答 1

0

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

最简单的解决方案是使用背景图片：一个小的 5px x 5px 60% 透明黑色 .png 就可以正常工作，为您的整体页面大小增加最小的占用空间，从 IE7 开始支持浏览器，并且不会覆盖您为页面块设置的宽度/高度声明。

我可以看到您发布的代码存在许多其他问题；您应用的 z-indexing 意味着登录框将出现在页面块的顶部（这是故意的吗？）。此外，您已指定登录框应出现在距页面右侧 20 像素的位置，但您已将其宽度设置为 100%。这计算为 100% + 20px 的总宽度，这比您的页面显示的要宽。尽量避免混合测量单位 - 要么基于百分比设置正确的位置，然后从宽度声明中扣除它，要么以像素为单位指定登录框的 with。从长远来看，您将为自己省去很多麻烦。

于 2012-10-16T07:54:04.787 回答