Extrêmement bizarre problème de compatibilité IE7/8 frontière/opacité

Le problème étrange est les frontières qui disparaissent lorsque l'opacité est appliquée dans IE/8/9, mais pas dans 7!
J'ai essentiellement un menu avec des onglets en haut de l'écran. i.e.:Extrêmement bizarre problème de compatibilité IE7/8 frontière/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); 
}

Désolé les étoiles, je ne pouvais pas obtenir la mise en forme de bloc de code de travail à droite.
Fondamentalement, cela est juste censé effacer les boutons lorsque la souris est survolée sur eux, mais les frontières disparaissent tout simplement! Ce problème se produit uniquement sur IE8/9, mais tout fonctionne bien sur IE7, FF, Chrome, Safari.
J'ai navigué sur Internet à la recherche de problèmes de frontière/opacité IE8 +, mais il semble n'y en avoir aucun.
Est-ce que quelqu'un a rencontré quelque chose de similaire?

Source

2011-05-13 Eugene

Je viens rencontré le même problème, et je suis désemparés. –

Avez-vous un jeu de couleurs d'arrière-plan pour les cellules de votre tableau, car cela semble se produire uniquement lorsque la couleur de fond est définie. –

Selon cette question http://stackoverflow.com/questions/3465346/table-cell-loses-border-when-css-gradient-filter-is-applied-in-ie8 bordures de table dans IE8 semblent avoir des probelms même avec autres filtres –

Le style filter est uniquement pour IE7 et inférieur.

IE8 vous oblige à utiliser -ms-filter (c'est-à-dire avec un préfixe fournisseur) à la place. De plus, la syntaxe est plus complexe dans IE8. Il ressemble à ceci:

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

IE9 gouttes soutien à filter entièrement, et le remplace par CSS3 norme opacity, qui fonctionne comme il le fait dans tous les autres browsrs.

Quirksmode.org a tous les détails: http://www.quirksmode.org/css/opacity.html

Source

2011-05-25 17:36:23 Spudley

Je ne pense pas qu'il s'agisse d'écrire un filtre en utilisant IE8. Un mauvais filtre écrit dans le pire des cas n'appliquerait pas l'opacité. Ici le problème est que la frontière de cellules de table disparaît. –

filtre: alpha (opacité = 100); // il varie de 0 à 100 – KBN

C'est ce que j'ai découvert à ce jour, je ne pense pas que la suppression background-color de vos cellules de table pourrait être une solution pour vous.

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

Et c'est le beau résultat quand-couleur de fond est appliquée sur IE8:

enter image description here

Source

2011-05-25 18:14:44

Je devais finalement avoir recours au déplacement de la couleur d'arrière-plan du td vers un div dans le td (le div devait être légèrement plus grand que le td pour le rendre transparent), tout en gardant l'opacité et bordure sur le td et ayant le fond: aucun sur le td; – Eugene

@Metatron: nouveau hack IE8 intéressant. Je vais essayer votre solution et vous le faire savoir. Merci d'avoir partagé cette idée. –

Extrêmement bizarre problème de compatibilité IE7/8 frontière/opacité

Répondre

Questions connexes