javascript - ie8 filter 滤镜 覆盖bug，在线等。

Question

遮罩层:css和html代码如下

当鼠标放到灰色遮罩层上，并移动到导航目录的时候，导航下拉是不会出现的。因为z-index已经是整个页面的最大值了。ie9～ie11、chrome、360这些浏览器都正常显示，当切换到ie8.0，ie8标准的文档模式，鼠标放置导航的位置下拉的内容就出来了。

请问:如何遮挡遮罩层下面的元素，有什么解决方案？

.zz-model,.lcs-model,.yy-model,.hd-model,.sc-model,.pro-model{
    width:100%;
    height:100%;
    background-color: rgba(102,102,102,.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f666666,endColorstr=#7f666666);
    position: absolute;
    top:0;
    z-index:19999;
}

Answer 1

控制一个元素的显示/隐藏，我觉得用

display: block;
display: none;

会更好一点。

---

而关于层叠上下文都有如下的层组成（显示顺序从后到前）：

1.形成层叠上下文的元素的背景和边框
2.层叠级别为负值的后代层叠上下文
3.常规流内非行内非定位的子元素组成的层
4.非定位的浮动子元素和它们的内容组成的层
5.常规流内行内非定位子元素组成的层
6.任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的层叠上下文组成的层
7.层叠级别为正值的后代层叠上下文

---

Answer 2

.zz-model,.lcs-model,.yy-model,.hd-model,.sc-model,.pro-model{
    /*IE 8 hack*/
    background: url(#)\0;
}

Answer 3

刚才也遇到了这个问题
我的解决方案是将rgba及其ie滤镜换成

background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

因为直接改变透明度 会让其中的内容也透明化 所以只适合在没有其他内容的遮罩层里使用