La sombra de la caja de inserción de CSS en la celda de la tabla está mal alineada

Question

Así que probablemente haya una respuesta simple a esto, pero parece que no puedo hacer que mi sombreado CSS funcione correctamente en una celda de la tabla. Tengo las siguientes reglas CSS:

table { 
    border: 1px solid #aaa; 
} 
table th, td { 
    width: 76px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center; 
} 
tr { 
    border: 1px solid #aaa; 
} 
td.color { 
    -moz-box-shadow:inset 0 0 10px 0 #222; 
    -webkit-box-shadow:inset 0 0 10px 0 #222; 
    box-shadow:inset 0 0 10px 0 #222; 
    border: 1px solid #000; 
} 
td.red { ... } 
td.green { ... } 

Así que estoy tratando de agregar clases .color y .red, .green, etc., para ciertas células con la sombra inserción a hacer que miren con sangría en la fila de tabla. Por alguna razón, la sombra del recuadro está mal alineada por 1px.

he publicado una imagen del problema aquí:

Resultando en los bordes inferior y derecho que tiene de 1 píxel de fondo que muestra a través.

¿Alguna idea? ¡Gracias!

-Nate

Answer 1

Works si se agrega display: block; a td.color

td.color { 
    -moz-box-shadow:inset 0 0 10px 0 #222; 
    -webkit-box-shadow:inset 0 0 10px 0 #222; 
    box-shadow:inset 0 0 10px 0 #222; 
    border: 1px solid #000; 
    display: block; 
} 

http://jsfiddle.net/jasongennaro/DjAfw/

probado en Chrome

Answer 2

Me temo que no puedo reproducir el problema, sin embargo, tienen problemas de sintaxis con su cuadro de inserción sombra. Por favor, intente este código en su lugar:

td.color { 
    -moz-box-shadow: 0 0 10px #222 inset; 
    -webkit-box-shadow: 0 0 10px #222 inset; 
    box-shadow: 0 0 10px #222 inset; 
    border: 1px solid #000; 
} 

Answer 3

Sólo darse cuenta de este problema 1px en Chrome (probado en Safari 5 & FF 5 también)

http://jsfiddle.net/pxfunc/sZqV5/

la border en las células parecen estar relacionados con el tema, se puede quitar el borde de la celda y la sombra es correcta. También como @Jason Gennaro ya publicado, display:block en la celda también corrige la sombra.

Considerar la publicación de sus hallazgos en la Lista de cromo de error: http://code.google.com/p/chromium/issues/list

Answer 4

Esta es la solución de errores de entrada IE9 box-shadow en la tabla

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

border-collapse: separada; es el punto de retroceso