無形的div div的無法在IE8中工作

我試圖創建一個不可見的div，在Facebook的評論插件爲了禁用編輯器視圖中的插件的功能。這個隱形div適用於除IE8以外的所有瀏覽器。我怎樣才能解決這個問題？無形的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; 
    }

來源

2012-07-16 JZ.

你試過設置'background：transparent;'你是什麼意思，它不起作用？ – dezman 2012-07-16 22:01:26

也許這有幫助嗎？ [鏈接]（http://stackoverflow.com/questions/1360131/how-to-fix-absolute-positioning-in-ie8） – r3bel 2012-07-16 22:06:04

用戶仍然可以與底部div進行交互。我不想要這個。我想coveriframe覆蓋底部div，容器 – 2012-07-16 22:06:47

我在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-30 22:56:42

這是我一生中的幾個小時，我永遠不會回來。感謝IE黑客男子！ – 2012-07-30 23:06:09

不用擔心。我從Firebug Lite在這種情況下處理IE的過程中學到了這個技巧（對於Element Inspector）。這花了一段時間來追查！ – 2012-07-30 23:09:40

你爲什麼要在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-16 22:13:37

它是一個很好的解決方案，但不適合我的用例。我需要用戶能夠看到它，但不能與之交互。它是一個黑客。 – 2012-07-16 22:16:09

如果IE在地球上的所有其他瀏覽器上工作，那就太好了。 – 2012-07-16 22:16:31

CSS Specification says:

的百分比是計算相對於代的高度包裝盒。如果包含塊的高度沒有明確指定（即，它取決於內容高度），並且該元素沒有被絕對定位，則值計算爲'auto'。

基本上，在舊版本的IE（包括IE8）百分比高度是基於父元素的高度。如果父元素沒有明確的高度，則百分比將被忽略並設置爲自動（在本例中爲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-16 22:21:42

爲什麼要將'＃coveriframe'的背景設置爲'transparent'？默認情況下，'div'的背景是「透明的」。 – 2012-07-16 23:03:05

啊，沒錯。我編輯了我的答案。謝謝。 – 2012-07-16 23:07:55

確保你是把固定的高度&寬度是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-31 12:22:48

問題是Internet Explorer高達IE9當鼠標懸停在某個透明背景不認鼠標懸停。扎克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-01 09:52:22 Tosh

無形的div div的無法在IE8中工作

回答

相關問題