box-shadow en IE9 no se procesa con CSS correcto, funciona en Firefox, Chrome

Estoy tratando de simular un tipo de cuadro flotante modal pero teniendo un problema con IE9 y su implementación de cuadro sombreado.box-shadow en IE9 no se procesa con CSS correcto, funciona en Firefox, Chrome

He aquí un resumen del código que estoy usando que puede duplicar el número:

<html> 
<head> 
    <title>Sample page</title> 
    <style> 
     .content-holder { 
      border-collapse: collapse; 
     } 
     .back { 
      background-color: #a8c0ff; 
      padding: 100px; 
     } 

     .inner { 
      background-color: #fff; 
      text-align: center; 
      padding: 50px; 
      box-shadow: 0px 0px 20px #000; 
     } 

    </style> 
</head> 
<body> 
    <table class="content-holder"> 
     <tr> 
      <td> 
       <div class="back"> 
        <div class="inner"> 
         <h2>Heading</h2> 
         <p class="subtext">Some text here</p> 
         <p>More text</p> 
         <a class="button" href="#">A button</a> 
        </div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body>

Funciona bien en Firefox/Chrome, etc, pero IE9 no muestra la sombra. Puedo cambiarlo a una sombra insertada y aparece como debería, pero una sombra exterior continúa eludiéndome.

¿Alguien por ahí puede arrojar algo de luz sobre este problema de sombra?

Fuente

2011-04-11 Arowin

sólo tenía el mismo problema [insertar Puño de la sacudida] –

111

Como descubrí (no por mí) en los comentarios, debe agregar border-collapse: separate; al elemento que box-shadow no está trabajando.

Y a partir de mi respuesta original, también asegúrese de tener un tipo de documento válido como la primera línea, como <!DOCTYPE html>. Pulse F12 para abrir las Herramientas del desarrollador y asegúrese de que se está utilizando el modo IE9 (o posterior), ya que se requiere para que box-shadow funcione.

Fuente

2011-04-11 06:27:55 thirtydot

Los aplausos por eso, el tipo de documento que faltaba era el problema con esa página ejemplo. Desafortunadamente, el problema todavía existe para el sitio real en el que estoy trabajando. El diseño es bastante similar a la muestra que di, pero nada de lo que parece hacer permite la sombra de fondo (pero el recuadro funciona). Temo que no pueda encontrar el problema y puede que tenga que ser algo con lo que viven :) – Arowin

Si te parece bien, me parece bien :) Aunque, lo veré nuevamente si puedes crear un caso de prueba (JS Bin) donde definitivamente ocurre el problema. – thirtydot

+16

OK, investigué un poco más y descubrí cuál era el problema ... * suspiro * Entonces, el div que tenía en el sitio estaba dentro de una tabla (diseño de tabla de la vieja escuela) que tenía un colapso de borde establecido en ' colapso'. Por alguna razón, tener ese conjunto significaba que la sombra de la caja no dibujaba. Solo necesitaba desactivar el colapso de frontera y funciona ... Trataré de publicar código de muestra aquí para que otras personas lo sepan. Gracias por su ayuda :) – Arowin

solamente confirmar esta cuestión y 2nd'ing @ solución final Arowin desde su podrían perderse por algunas personas - añadir a la border-collapse:separate;<div> afectados - IE9 ahora muestra la sombra correcta cuando un <div> está contenido en un <table> con border-collapse:collapse; conjunto. ¡Gracias!

Fuente

2011-06-11 00:01:51 toyNN

Este fue mi problema; estableciendo 'border-collapse' en' div' con 'box-shadow' trabajado. –

Tuve el mismo problema. En realidad, IE9 no requiere ningún tipo de documento para que estos estilos funcionen. Cuál es la causa del problema es "border-collapse: collapse" en tablas con shadow - use cellspacing = 0 entonces funciona - still: bugger IE

Fuente

2011-09-03 09:17:54

Ooops - lo siento, pero no estaba del todo en lo cierto en mis pruebas - parece que Doctype es esencial para que estas cosas funcionen. Pero luego todo lo demás se rompe. Creo que la próxima vez escribiré para IE primero y luego para los demás, ¡hey mabe, esa es la estrategia de microsofts todo el tiempo! –

increíble, gracias por eso. –

en lugar de 'cellspacing = 0', use' style = "border-collapse: separate; border-spacing: 0;" 'para mantener las cosas pure-CSS – megaflop

En mi caso, cambié de Transitional a Strict XHTML-doctype ayudado.

Quitar el colapso de borde de la mesa contenedor también ayudó.

Fuente

2011-10-06 11:55:04 Alex

En mi caso, nada ayudó. Después de horas de depuración He descubierto que la siguiente etiqueta meta era el problema:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Fuente

2011-11-01 09:01:39

Sí, si lo hace un poco de puesta a cero durante varios elementos HTML en su css como (yo mismo sólo debes copiar y material pasta de proyectos antiguos, nunca se pensar en las consecuencias: D):

html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul, 
li, legend, table, tbody, tr, th, td { 
    order:0; 
    outline:0; 
    font-weight:inherit; 
    font-style:inherit; 
    font-size:100%; 
    font-family:inherit; 
    border-spacing: 0; 
    border-collapse: collapse; 
}

así ... corte que ~~border-collapse: collapse~~ salir de allí y agregarlo como una separada

table, tbody, tr, th, td { 
    border-collapse: collapse; 
}

... por lo que no se aplica a su div, p, span, img o donde sea que necesite la sombra.

Fuente

2011-11-16 18:07:32 Allisone

Tenía un div que estaba dentro de una celda de la tabla. Usar border-collapse:separate en el div resolvió el problema para mí.

Fuente

2012-02-02 16:42:05 dfmiller

La solución de error de cuadro de entrada IE9 funcionará en este error.

input{ 
box-shadow: 0px 0px 5px #3699FF; 
border-collapse: separate; 
}

border-collapse: separate; es lo que hay que añadir a resolver este problema en las tablas.

Fuente

2012-02-08 17:19:55 dodortus

The border-collapse: separate; solo lo he resuelto parcialmente. Tenemos color de fondo agregado a las filas (tr) y sombra debajo de la fila que está seleccionada (y expandida).

El color de fondo bloquea la sombra, ya que parece ser un problema tipo z-index. De todos modos, lo resolvimos con el valor de rgba para el color. Elegimos un color de fila más oscuro y usamos un 20% para el valor alfa para que se pueda mostrar el sombreado subyacente.

 
table { border-collapse: separate;} 

tr:nth-child(even) { /* odd color transparent */ 
    /* background-color: someothercolor; */ /*shadow did not display thru solid color */ 
    background-color: rgba(168,163,136,.2); 
}

Fuente

2012-10-19 12:31:21 Avec

En mi caso, IE 9 rendía el documento en el modo de compatibilidad, aunque tenía un DOCTYPE válida. Estaba depurando localmente, e IE tiene una configuración "Mostrar sitios de intranet en la Vista de compatibilidad" que estaba habilitada, aparentemente de manera predeterminada. Después de deshabilitar esto, todo funciona como se esperaba. Esto se puede encontrar en Herramientas -> Configuración de Vista de compatibilidad.

Fuente

2012-11-11 14:26:52

Esta etiqueta meta lo resolvió para mí. También ha de resolver otros problemas de IE extrañas que no se producen en Chrome y Firefox:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Fuente

2014-02-14 00:31:51 Sean

box-shadow en IE9 no se procesa con CSS correcto, funciona en Firefox, Chrome

Respuesta

Cuestiones relacionadas