Invisible div over div non funziona in IE8

Question

Sto provando a creare un div invisibile, sopra il plug-in dei commenti di Facebook, al fine di disabilitare la funzionalità del plugin in una vista Editor. Questo div invisibile funziona su tutti i browser tranne IE8. Come posso risolvere questo?

HTML:

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

Prova in IE8:

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

• Il codice precedente funziona in tutti gli altri browser principali. WTF Microsoft?

foglio di stile:

#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

Ho fatto questo più volte in IE8. La soluzione che funziona per me è assegnare un colore di sfondo al div e quindi impostare l'opacità su 0. IE8 quindi riconosce il div come "esistente" sopra il resto del contenuto. Trovo anche che l'impostazione position: absolute e tutte e quattro le direzioni su 0 siano più affidabili del 100% di larghezza e altezza.Come questo:

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

Ecco il mio aggiornamento al jsfiddle: http://jsfiddle.net/pkbz4/21/

Answer 2

perché hai voluto fare in javascript e funziona bene in tutti i browser, ti lascio il mio esempio spero che si lavora:

---- ------------- 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"; 

    } 

------ ----------- pulsante HTML ----------------

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

Answer 3

CSS Specification says:

La percentuale è calcolato rispetto all'altezza del generatore blocco contenente la scatola. Se l'altezza del blocco contenente non è specificata esplicitamente (vale a dire, dipende dall'altezza del contenuto ) e questo elemento non è posizionato in modo assoluto, il valore calcola su "auto".

In sostanza, nelle versioni precedenti di IE (incluso IE8) le altezze percentuali si basano sull'altezza dell'elemento padre. Se l'elemento genitore non ha un'altezza esplicita, la percentuale viene ignorata e impostata su Auto (in questo caso, 0px).

Quindi, per risolvere questo problema, dovrai impostare in modo esplicito l'altezza/larghezza di #coveriframe o il suo genitore. Una cosa che si potrebbe provare è impostare l'altezza di html e corpo al 100% (sto assumendo quelli sono gli elementi genitore).

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

Assicurarsi che si sta mettendo larghezza fissa altezza & a quella DIV.

Come Shaquin Trifonoff menzionato in precedenza a volte 100% o qualsiasi lunghezza in % potrebbe non funzionare su IE8. Sto sempre cercando di evitare % in tale situazione.

Codice frammento: -

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

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

Answer 5

Il problema è che Internet Explorer fino a IE9 non riconosce il passaggio del mouse quando aleggiava su uno sfondo trasparente. La risposta di Zach Shipley offre buone soluzioni.

Ma nel caso in cui si desideri aggiungere un bordo o un elemento al div trasparente o al testo, il modo più semplice per farlo è aggiungere un png trasparente 1px come sfondo.

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