IE8中的重叠式广告不可点击 [英] Overlay not clickable in IE8

问题描述

在所有浏览器（例如Firefox，Chrome，IE9）中，点击我的叠加层会启动我的 onClick 功能。然而，在IE8中，它就好像该框不存在的方式，它是不可点击，背后的内容。

 < div id = pageblockonclick =closelogin（）>< / div> 
< div id =loginbox><！ - 这是我的表单是 - >< / 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）; 
} 
  

谢谢！

解决方案

错误，正如你已经确定的，源于使用-ms-filter。看起来，应用过滤器的操作会更改浏览器计算宽度和高度的方式，因此可点击区域缩小为pageblock div内的文本，而不是整个div本身。

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

我可以看到您发布的代码的一些其他问题;您应用的z-indexing意味着loginbox将出现在pageblock的顶部（这是有意的？）。此外，您已指定登录框应显示在页面右侧20像素，但您已给它100％的宽度。计算总宽度为100％+ 20像素，宽度比您的网页要宽。尝试并避免混合测量单位 - 或者使用正确的分数百分比，并从宽度声明中扣除它，或者以像素为单位指定loginbox。从长远来看，你会为自己节省很多头痛。

In all browsers (e.g. Firefox, Chrome, IE9) clicking my overlay fires my onClick function. However, in IE8, it is as if the box does not exist in the way that it is not clickable, and content behind is. Here's my code:

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 and earlier CSS:

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

Thanks!

解决方案

The error, as you've already identified, stems from the use of -ms-filter. It seems that the act of applying the filter changes how the browser calculates the width and height, so the clickable area is reduced to the text within the pageblock div, and not the whole div itself.

The simplest solution would be to use a background image: a small 5px x 5px 60% transparent black .png will work just fine, will add a minimal footprint to your overall page size, has browser support from IE7 upwards, and will not overwrite the width/height declarations you've set for pageblock.

I can see a number of other issues with the code you posted; the z-indexing you've applied means that the loginbox will appear over the top of pageblock (is that intentional?). Also, you've specified that loginbox should appear 20px from the right of the page, but you've given it a width of 100%. That computes to a total width of 100% + 20px, which is wider than your page will display. Try and avoid mixing measurement units - either make the right pposition percentage-based and deduct it from the width declaration, or specify the with of loginbox in pixels. You'll save yourself a lot of headaches in the long run.

这篇关于IE8中的重叠式广告不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！