css - 不可见的 div over div 在 IE8 中不起作用

Question

我试图在 facebook 评论插件上创建一个不可见的 div，以便在编辑器 View 中禁用该插件的功能。这个不可见的 div 适用于除 IE8 之外的所有浏览器。我该如何解决这个问题？

HTML:

<div id="container">
   <div id="coveriframe"></div>   
    <div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>

在 IE8 中试试:

http://jsfiddle.net/pkbz4/19/

• 以上代码适用于所有其他主流浏览器。 WTF 微软？

样式表:

    #container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #navi, 
    #coveriframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #coveriframe {
        z-index: 10;
   }

Answer 1

我已经在 IE8 中多次执行此操作。对我有用的解决方案是为 div 分配背景颜色，然后将不透明度设置为 0。IE8 然后将 div 识别为“存在”在其余内容之上。我还发现将 position: absolute 和所有四个方向设置为 0 比 100% 宽度和高度更可靠。像这样:

#coveriframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3007;
  background: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
}

这是我对你的 jsfiddle 的更新:http://jsfiddle.net/pkbz4/21/