最近做了一个活动的弹层，需求如下:
弹层的背景颜色需要有透明度，点击非内容区域，需要关闭弹层。
其实这个需求难度并不高。背景色的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的写法，并且引用一个空白作为我们的背景图。
修改后的代码如下：
<!--[if IE 8]>
<style>
.window_shade_1{
width: 100%;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
display: none;
z-index:999;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
background: url(about:blank);
}
</style>
<![endif]-->
这样的话，没有改变原来的css内容，只是在IE8下加了这段css，相当于当浏览器为IE8的时候。重新写了这个元素的css。
但是需要注意的是：
<!--[if IE 8]> <![endif]-->
这个标签，相当于在IE8下给html中增加了一部分代码。如果需要写css，就要加上<style></style>标签，如果需要增加js，需要加上<script></script>标签。
其实这里解决这个问题主要是增加了两部分代码：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
background: url(about:blank);
background: url(about:blank);
这种写法也可以用在轮播图的分页器上，在IE8下，点击分页器很有可能会点到轮播图片上，加上它就好啦~
ok~结束， 这就是我解决这个问题的办法。如果有人有更好的办法也可以来交流一下呀~ 希望能学到更好的写法。
把自己遇到的bug写下来能，能帮到其他人更好，帮不到的话，就当给自己警示了~避免以后再犯同样的错误。
仅供参考，不喜勿喷，转载不用注明出处，给钱就行（说的好像有人真要转一样 =_=）
网友评论