div 上的不可见 div 在 IE8 中不起作用答案

【问题标题】：Invisible div over div does not work in IE8div 上的不可见 div 在 IE8 中不起作用
【发布时间】：2012-08-01 17:52:22
【问题描述】：

我正在尝试通过 facebook cmets 插件创建一个不可见的 div，以便在编辑器视图中禁用该插件的功能。这个不可见的 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;
   }

【问题讨论】：

您是否尝试设置background: transparent; 不起作用是什么意思？
也许这有帮助？ link
用户仍然可以与底部 div 交互。我不想要这个。我想让coveriframe覆盖底部的div，容器
IE8有时看不懂100%，可以用精确像素width/height吗？
另外，top: 0; left: 0; bottom: 0; right: 0; 而不是 top: 0; left: 0; 呢？

标签： css internet-explorer html invisible

【解决方案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/

【讨论】：

那是我生命中的几个小时，我永远不会回来。感谢 IE 黑客！
不用担心。我从 Firebug Lite 在相同情况下对 IE 的处理中学到了这个技巧（对于 Element Inspector）。这需要一段时间才能找到！

【解决方案2】：

CSS Specification says:

百分比是相对于高度计算的生成框的包含块。如果包含的高度块没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为“自动”。

基本上，在旧版本的 IE（包括 IE8）中，百分比高度基于父元素的高度。如果父元素没有明确的高度，则忽略百分比并将其设置为 Auto（在本例中为 0px）。

因此，要解决此问题，您需要明确设置 #coveriframe 或其父级的高度/宽度。您可以尝试的一件事是将 html 和 body 的高度设置为 100%（我假设它们是父元素）。

html, body { height:100%; }

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

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

#coveriframe {
    z-index: 10;
}

【讨论】：

为什么要将#coveriframe的背景设置为transparent？默认情况下，div 的背景是transparent。

【解决方案3】：

你为什么要在 javascript 中做，它在所有浏览器中都运行良好，我举个例子希望你能工作：

-----------------DIV-----------------

<div id="div1" style="display: block;"> <div class="mainbody"> <br /> </div></div>

-----------------JavaScript----------------

    function showHideDiv(divX) {

        if (divX == "1") {
            document.getElementById("div1").style.visibility = "visible";
            document.getElementById("div2").style.visibility = "hidden";

    }

-----------------按钮 HTML----------------

<li><a href="#cuenta" onclick="showHideDiv(0)">click_Aqui</a></li>

【讨论】：

这是一个很好的解决方案，但不适用于我的用例。我需要用户能够看到它，但不能与之交互。它是一个黑客。
如果 IE 能像地球上所有其他浏览器一样工作，那就太好了。

【解决方案4】：

问题在于，IE9 之前的 Internet Explorer 在将鼠标悬停在透明背景上时无法识别鼠标悬停。 Zach Shipley 的回答提供了一个很好的解决方案。

但如果您想为透明 div 或文本添加边框或元素，最简单的方法是添加 1px 透明 png 作为背景。

#coveriframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3007;
  background-image: url("pixel-transparent.png");
}

【讨论】：

【解决方案5】：

确保您将固定的高度和宽度设置为 DIV。

正如上面提到的 Shaquin Trifonoff 有时 100% 或 % 中的任何长度可能不适用于IE8。在这种情况下，我总是试图避免%。

代码 sn-p :-

html,body{ //This makes your page expandable as per screen resolution 
 height:100%;
}

#your-hide-div{
  height:100px;
  width: 100px;
  display:block;
}

【讨论】：