9

我正在尝试通过 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/

  • 上面的代码适用于所有其他主要浏览器。微软？

样式表：

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

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

    #coveriframe {
        z-index: 10;
   }
4

5 回答 5

15

我在 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/

于 2012-07-30T22:56:42.377 回答
4

CSS 规范 说：

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

基本上，在旧版本的 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;
}
于 2012-07-16T22:21:42.763 回答
1

你为什么要在 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>

于 2012-07-16T22:13:37.973 回答
1

问题是，当鼠标悬停在透明背景上时，最高 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");
}
于 2012-08-01T09:52:22.993 回答
0

确保您将固定的高度和宽度设置为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;
}
于 2012-07-31T12:22:48.360 回答