html - sea - box-shadow en IE9 no se procesa con CSS correcto, funciona en Firefox, Chrome
pagina web no se ve bien en internet explorer (11)
Intento simular un tipo de cuadro flotante modal pero tengo un problema con IE9 y su implementación de cuadro sombreado.
Aquí hay un resumen del código que estoy usando que puede duplicar el problema:
<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?
Como descubrí (no por mí) en los comentarios, debe agregar border-collapse: separate; al elemento con el 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 que box-shadow funcione.
En mi caso, IE 9 estaba renderizando el documento en modo compatibilidad, aunque tenía un DOCTYPE válido. 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.
En mi caso, me ayudó el cambio de Transitional a Strict XHTML-doctype.
Eliminar el colapso de borde de la tabla contenedor también ayudó.
En mi caso, nada ayudó. Después de horas de depuración, descubrí que la siguiente metaetiqueta era el problema:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Esta metaetiqueta me lo resolvió. También ha resuelto otros problemas extraños de IE que no ocurren en Chrome y Firefox:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
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 necesita agregar para resolver este problema en las tablas.
Sí, si haces algunos reinicios para varios elementos html en tu CSS como (yo solo copio y pego cosas de proyectos viejos, sin pensar nunca 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;
}
bueno ... cortar ese border-collapse: collapse
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.
Solo estoy confirmando este problema y la solución final de 2nd''ing @ Arowin, ya que algunas personas podrían pasarlo por alto: agregar border-collapse:separate; al <div> afectado - IE9 ahora muestra la sombra correcta cuando un <div> está contenido en una <table> con border-collapse:collapse; conjunto. ¡Gracias!
Tenía un div que estaba dentro de una celda de la mesa. Usando border-collapse:separate en el div resolvió el problema para mí.
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
The border-collapse: separate; solo parcialmente lo resolvió para mí. 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); }