Question

我正在尝试在facebook评论插件上创建一个不可见的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;
   }

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/

Answer 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;
}

Answer 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>

Answer 4

问题是，当浏览透明背景时，ie9上的网络浏览器无法识别鼠标悬停。 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");
}

Answer 5

确保你把固定高度和高度放在一起。宽度为DIV。

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

代码段： -

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

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

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

5 个答案: