Estremamente strano IE7/8 problema di compatibilità di confine/opacità

Il problema strano è che i bordi scompaiono quando Opacity viene applicato in IE/8/9, ma NON in 7!
Ho praticamente un menu con le schede nella parte superiore dello schermo. cioè:Estremamente strano IE7/8 problema di compatibilità di confine/opacità

<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); 
}

Mi dispiace per le stelle, non ho potuto ottenere la formattazione blocco di codice a lavorare subito.
In pratica, si suppone che i pulsanti vengano sbloccati solo quando il mouse si sposta su di essi, ma i bordi scompaiono! Questo problema si verifica solo su IE8/9, ma tutto funziona perfettamente su IE7, FF, Chrome, Safari.
Ho navigato su internet alla ricerca di alcuni strani problemi di IE8 + bordo/opacità, ma sembra che non ce ne siano.
Qualcuno ha riscontrato qualcosa di simile?

fonte

2011-05-13 Eugene

Ho appena incontrato lo stesso problema, e io sono all'oscuro. –

hai impostato il colore di sfondo per le celle della tabella, perché sembra che si verifichi solo quando è impostato il colore di sfondo. –

Secondo questa domanda http://stackoverflow.com/questions/3465346/table-cell-loses-border-when-css-gradient-filter-is-applied-in-ie8 i bordi del tavolo in IE8 sembrano avere problemi anche con altri filtri –

Lo stile filter è solo per IE7 e inferiore.

IE8 richiede invece l'utilizzo di -ms-filter (ovvero con un prefisso del venditore). Inoltre la sintassi è più complessa in IE8. Ecco come si presenta:

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

IE9 cade il supporto per filter del tutto, e lo sostituisce con CSS3 standard di opacity, che funziona lo stesso come avviene in tutti gli altri browsrs.

Quirksmode.org ha tutti i dettagli: http://www.quirksmode.org/css/opacity.html

fonte

2011-05-25 17:36:23 Spudley

Non penso che si tratti di scrivere filtri usando il modo IE8. Un filtro scritto errato nel caso peggiore non applicherebbe l'opacità. Qui il problema è che il confine delle celle della tabella scompare. Filtro –

: alfa (opacità = 100); // varia da 0 a 100 – KBN

Questo è quello che ho scoperto finora, non credo che la rimozione background-color delle vostre celle della tabella potrebbe essere una soluzione per voi.

<!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>

E questo è il bellissimo risultato quando background-color è applicato su IE8:

enter image description here

fonte

2011-05-25 18:14:44

Alla fine ho dovuto ricorrere allo spostamento del colore di sfondo dal td a un div all'interno del td (il div doveva essere leggermente più grande del td per farlo apparire senza cuciture), pur mantenendo l'opacità e bordo sul td e con sfondo: nessuno sul td; – Eugene

@Metatron: interessante nuovo IE8 hack. Vado a provare la tua soluzione e ti faccio sapere. Grazie per aver condiviso questa idea. –

Estremamente strano IE7/8 problema di compatibilità di confine/opacità

risposta

Problemi correlati