IE 8 下rgba颜色失效以及遮罩点击穿透的处理办法

最近做了一个活动的弹层，需求如下:

弹层的背景颜色需要有透明度，点击非内容区域，需要关闭弹层。

其实这个需求难度并不高。背景色的css以及关闭弹层的点击事件都很好写。

贴一下背景的css代码：

  .window_shade_1{
      width: 100%;
      background: rgba(0,0,0,0.3);
      position: fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
      display: none;
      z-index:999;
      }

这个代码在IE8以上的浏览器中是可以正常展示的，点击弹层的非内容部分也可以关闭弹层。

但是！！！

有个浏览器叫做IE8

在IE8下，弹层出现了两个问题：
1.弹层的背景色不显示了。（这个可以理解，毕竟我自己给自己挖了坑，用了rgba）
2.没有办法点击到弹层的非内容处了，弹层的背景就想被鼠标穿透了一样。鼠标点击的时候，自动点到了弹层下面的部分了。

不知道大家在写弹层的时候，是否也遇到过类似的问题。

第一个问题，是因为IE8不兼容rgba渲染颜色，可以直接用IE8的兼容性写法来解决。

第二个问题，是因为我们的背景没有用图片来渲染，IE8下认为我们没有背景，点击的时候就点到了弹层的下一层。

解决问题的办法，在IE8下，将rgba换成可以兼容IE8的写法，并且引用一个空白作为我们的背景图。

修改后的代码如下：

这样的话，没有改变原来的css内容，只是在IE8下加了这段css，相当于当浏览器为IE8的时候。重新写了这个元素的css。

但是需要注意的是：

这个标签，相当于在IE8下给html中增加了一部分代码。如果需要写css，就要加上标签，如果需要增加js，需要加上标签。

其实这里解决这个问题主要是增加了两部分代码：

         filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
         background:  url(about:blank);

background: url(about:blank);

这种写法也可以用在轮播图的分页器上，在IE8下，点击分页器很有可能会点到轮播图片上，加上它就好啦~

ok~结束， 这就是我解决这个问题的办法。如果有人有更好的办法也可以来交流一下呀~ 希望能学到更好的写法。

把自己遇到的bug写下来能，能帮到其他人更好，帮不到的话，就当给自己警示了~避免以后再犯同样的错误。

仅供参考，不喜勿喷，转载不用注明出处，给钱就行（说的好像有人真要转一样 =_=）