Invisible div over div no funciona en IE8

Question

Estoy tratando de crear un div invisible, sobre el complemento de comentarios de Facebook para desactivar la funcionalidad del complemento en una vista de editor. Este div invisible funciona en todos los navegadores excepto IE8. ¿Cómo puedo arreglar esto?

HTML:

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

Trate en IE8:

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

• El código anterior funciona en todos los otros navegadores principales. WTF Microsoft?

de estilos:

#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

He hecho esto varias veces en IE8. La solución que funciona para mí es asignar un color de fondo al div y luego establecer la opacidad en 0. IE8 luego reconoce el div como "existente" sobre el resto del contenido. También me parece que configurar position: absolute y las cuatro direcciones a 0 es más confiable que 100% de ancho y alto.De esta manera:

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

Aquí está mi actualización de su jsFiddle: http://jsfiddle.net/pkbz4/21/

Answer 2

¿por qué usted quiere hacer en javascript y funciona bien en todos los navegadores, te dejaré mi ejemplo espero que trabaja:

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

    } 

------ ----------- botón HTML ----------------

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

Answer 3

CSS Specification says:

El porcentaje es calculado con respecto a la altura del gener bloque contenedor que contiene la caja. Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende del contenido de altura), y este elemento no está en absoluto posicionado, el valor se computa a 'auto'.

Básicamente, en versiones anteriores de IE (incluido IE8) las alturas de porcentaje se basan en la altura del elemento principal. Si el elemento principal no tiene una altura explícita, el porcentaje se ignora y se establece en Automático (en este caso, 0px).

Por lo tanto, para solucionar este problema, tendrá que establecer explícitamente el alto/ancho de #coveriframe o su elemento principal. Una cosa que podría intentar es establecer la altura de html y cuerpo al 100% (supongo que esos son los elementos principales).

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

Asegúrese de que usted está poniendo fijo altura anchura & a que DIV.

Como Shaquin Trifonoff mencionó anteriormente a veces 100% o cualquier longitud en % puede no funcionar en IE8. Siempre trato de evitar % en tal situación.

Código fragmento: -

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

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

Answer 5

El problema es que Internet Explorer hasta IE9 no reconoce el cursor del ratón cuando flotaba sobre un fondo transparente. La respuesta de Zach Shipley ofrece buenas soluciones.

Pero en caso de que quiera agregar un borde o un elemento al texto o div transparente, la manera más fácil de hacerlo es agregar un png transparente 1px como fondo.

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