divの目に見えないdivがIE8で機能しない

Question

Editorビューでプラ​​グインの機能を無効にするために、Facebookのコメントプラグインで目に見えないdivを作成しようとしています。この目に見えないdivは、IE8を除くすべてのブラウザで機能します。これをどうすれば解決できますか？

HTML：IE8で

<div id="container"> 
    <div id="coveriframe"></div> 
    <div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div> 
</div> 

試してみてください。

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

• 上記のコードは、他のすべての主要なブラウザで動作します。 WTF Microsoft？

スタイルシート：あなたがJavaScriptでやりたいと、それはすべてのブラウザでうまく機能しなかった理由

#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と4つの方向を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

、私はあなたが仕事を願って私の例をもらおう：

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

CSS Specification says:

割合がありますgenerの高さに対して計算された atedボックスのブロックを含む。 ブロックの高さが明示的に指定されていない場合（つまり、内容が の高さに依存する）、この要素が絶対的に配置されていない場合、値 は 'auto'と計算されます。

基本的にIE（IE8を含む）の以前のバージョンでは、パーセンテージの高さは親要素の高さに基づいています。親要素に明示的な高さがない場合、パーセントは無視され、Auto（この場合は0px）に設定されます。

これを修正するには、#coveriframeまたはその親の高さ/幅を明示的に設定する必要があります。あなたが試みることの1つは、htmlとボディの高さを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 4

あなたはその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; 
} 

Answer 5

問題は、透明な背景の上に推移したときに、マウスのホバーを認識しない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"); 
}