Problema de compatibilidad de borde/opacidad IE7/8 extremadamente extraño

El problema extraño es que las fronteras desaparecen cuando se aplica Opacidad en IE/8/9, pero NO en 7!
Básicamente tengo un menú con pestañas en la parte superior de la pantalla. es decir:Problema de compatibilidad de borde/opacidad IE7/8 extremadamente extraño

<table> 
<tr> 
    <td class="tab">button 1...<*/td> 
    <td class="tab">button 2....<*/td> 
    . 
    . 
    . 
</tr> 
</table> 

<style> 
td 
{ 
    opacity: 0.45; 
    filter:alpha(opacity=45); 
    . 
    . 
    . 
} 
td.tab:hover 
{ 
    opacity: 1; 
    filter:alpha(opacity=100); 
}

Lo sentimos acerca de las estrellas, no pude conseguir el formato bloque de código funciona bien.
Básicamente se supone que esto desmultiplica los botones cuando el mouse está sobre ellos, ¡pero los bordes simplemente desaparecen! Este problema solo ocurre en IE8/9, pero todo funciona bien en IE7, FF, Chrome, Safari.
He navegado por Internet buscando algunos problemas extraños de borde/opacidad IE8 +, pero parece que no hay ninguno.
¿Alguien ha encontrado algo similar?

Fuente

2011-05-13 Eugene

acabo encontrado con el mismo problema, y no tengo ni idea. –

tiene un conjunto de colores de fondo para las celdas de la tabla, porque parece suceder solo cuando se establece el color de fondo. –

De acuerdo con esta pregunta http://stackoverflow.com/questions/3465346/table-cell-loses-border-when-css-gradient-filter-is-applied-in-ie8 los bordes de la tabla en IE8 parecen tener probelmas incluso con otros filtros –

El estilo filter es solo para IE7 e inferior.

IE8 requiere que utilice -ms-filter (es decir, con un prefijo de proveedor) en su lugar. Además, la sintaxis es más compleja en IE8. Se ve así:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

IE9 gotas de apoyo a filter por completo, y lo reemplaza con CSS3 estándar opacity, que funciona igual que lo hace en todos los demás browsrs.

Quirksmode.org tiene los detalles completos: http://www.quirksmode.org/css/opacity.html

Fuente

2011-05-25 17:36:23 Spudley

No creo que se trate de escribir un filtro usando la forma IE8. Un filtro escrito incorrecto en el peor de los casos no aplicará la opacidad. Aquí el problema es que el borde de las celdas de la tabla desaparece. –

filtro: alfa (opacidad = 100); // varía de 0 a 100 – KBN

Esto es lo que he descubierto hasta ahora, no creo que la eliminación de background-color de sus celdas de la tabla podría ser una solución para usted.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     table {border-top:1px solid #cccccc; border-left:1px solid #cccccc;} 
     table td {border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding:3px;}  
     table tr.opaque td { 
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter:alpha(opacity=100); opacity:1;} 

     /* By adding background-color below, the table borders cells disappears 
     in IE8. It's just the nth Microsoft's trigger tree! 
     IE7 does not have this issue. */ 
     table tr.opaque td {background-color:#ffffff;} 
    </style> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> 
    <tr class="opaque"><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> 
    <tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> 
</table> 
</body> 
</html>

Y este es el resultado hermoso cuando se aplica color de fondo en IE8:

enter image description here

Fuente

2011-05-25 18:14:44

Eventualmente tuve que recurrir a mover el color de fondo del td a un div dentro del td (el div tenía que ser un poco más grande que el td para que pareciera transparente), manteniendo la opacidad y borde en el td y teniendo fondo: ninguno en el td; – Eugene

@ Metatron: nuevo truco IE8 interesante. Voy a probar tu solución y dejarte saber. Gracias por compartir esta idea –

Problema de compatibilidad de borde/opacidad IE7/8 extremadamente extraño

Respuesta

Cuestiones relacionadas