ie11 - internet explorer 11 hack css

La celda de la tabla pierde el borde cuando se aplica el filtro de gradiente de css en IE8

Question

Encontré que el borde css en la celda de la tabla se pierde al aplicar el filtro de gradiente de CSS al mismo tiempo. Parece que el efecto de degradado anula el borde.

¿Es un error del navegador o me falta algo aquí?

El estilo se define así:

.c7 {
color: #000000;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=''#c0c0c0'',EndColorStr=''#f0f0f0'');
border: #000000 1px solid;
width: 100px;
height: 30px;
}

[Actualizar] Puede aplicar un filtro de opacidad y reducirlo de 100 a 1, y puede ver cómo el borde emerge gradualmente. Confirma mi suposición de que el efecto de gradiente se muestra sobre el borde.

Answer 1

Aplicar esto también funciona:

position: relative;
z-index: -1;

Answer 2

Después de probar muchas correcciones, he llegado a la conclusión de que simplemente no vale la pena intentar usar el filtro CSS. Una cita de @mdo que está detrás del Twitter bootstrap css:

Los filtros son un negocio peligroso en IE, especialmente 7 y 8. Preferiría no incluirlos porque sería una gran pérdida de rendimiento para las personas que abusan de ellos.

Problemas que apliqué aplicando css a elementos td :

• El position: relative solo funciona para IE9, no IE8
• El z-index: -1 no funciona en elementos td
• Si tiene un filtro, debe desactivarlo para suspenderlo
• Mi mesa se veía mejor teniendo las fronteras que tener el degradado en las celdas de la tabla

Answer 3

He encontrado una solución, pero es posible que no te guste ...

Si renderizas en IE en el modo peculiar, el borde se ve bien, solo se oscurece si estás usando el modo de compatibilidad. Compara estas dos páginas en IE8:

• Con una declaración DOCTYPE
  • http://www.boogdesign.com/examples/css3/borders-tables-gradients-1.png
• Sin una declaración DOCTYPE
  • http://www.boogdesign.com/examples/css3/borders-tables-gradients-2.png

Lo que también funciona es hacer clic en el botón de vista de compatibilidad, pero mis intentos de obtener los mismos resultados con las metaetiquetas del modo de compatibilidad no tuvieron éxito. Traté de usar box-sizing , pero también sin éxito. Concluyo que la única manera de hacerlo funcionar como lo desea es forzar IE en el modo peculiar, pero eso puede crear tantos otros problemas de diseño que puede ser mejor simplemente agregar un elemento contenedor para adjuntar su fondo degradado.

Answer 4

Intenté todas estas soluciones sin éxito. Entonces, puse el gradiente en el tr y luego decidí usar el pseudo elemento :: before y ponerle un borde. Sin embargo, ni siquiera llegué a añadir un borde al pseudo elemento. Lo siguiente fue suficiente.

 table thead {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ffffff'', endColorstr=''#e9e9d9'',GradientType=0 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ffffff'', endColorstr=''#e9e9d9'',GradientType=0 );
}
table th {
background: none;
border-right: 1px solid #a5a694;
background-clip: padding-box;
position: relative!important;
z-index: 100;
}
table th:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '''';
}

Pero si eso no funciona, también podría agregar un borde a la pseudoclase como había planeado originalmente:

table th:before {
border-right: 1px solid #000000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '''';
z-index: 1000;
}

Las pseudo clases son geniales, las utilizo todo el tiempo y tienen un amplio soporte para navegadores, incluso en IE8.

Answer 5

Use un DIV para contener el contenido en cada celda. Aplica el degradado al DIV y coloca el borde en la celda. El degradado estará restringido al DIV y no sobrescribirá el borde.

http://jsfiddle.net/WWCaj/1/

Answer 6

en la td:

 /* enough for IE9 */
background-origin: padding-box;
background-clip: padding-box;
/* for IE8 */
position: relative;

trabajó para mi.

también es posible que desee experimentar con el colapso de borde ya que este error se comporta de manera diferente

 border-collapse: separate

y

 border-collapse: collapse

Answer 7

use position: relative! important;

Funciona bien ...