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

I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?

我试图在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>

Try in IE8:

试试IE8:

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

The above code works in ALL other Major browsers. WTF Microsoft?

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

Stylesheet:

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

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

    #coveriframe {
        z-index: 10;
   }

5 个解决方案

#1

I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:

我在IE8中已经多次这样做了。适用于我的解决方案是为div指定背景颜色,然后将不透明度设置为0. IE8然后将div识别为其余内容上方的“现有”。我还发现设置位置:绝对,所有四个方向为0比100%宽度和高度更可靠。像这样:

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

Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/

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

#2

CSS Specification says:

CSS规范说:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值计算为“auto”。

Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).

基本上,在旧版本的IE(包括IE8)中,百分比高度基于父元素的高度。如果父元素没有显式高度,则忽略百分比并将其设置为Auto(在本例中为0px)。

So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).

因此,要解决此问题,您要么明确设置#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;
}

#3

why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:

为什么你想用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";

    }

-----------------button HTML----------------

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

click_Aqui

#4

The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.

问题是,当在透明背景上盘旋时,ie9的Internet浏览器无法识别鼠标悬停。 Zach Shipley的回答提供了一个很好的解决方案。

But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.

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

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

#5

Make sure that you are putting fixed height & width to that DIV.

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

As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.

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

Code snippet :-

代码片段: -

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

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

#1

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