J'utilise CSS pour indiquer le texte de déclenchement d'une section coulissante jQuery: c'est-à-dire que lorsque vous survolez le texte de déclenchement, le curseur se transforme en pointeur et l'opacité du texte de déclenchement est réduite pour indiquer que le texte a une action de clic .

Cela fonctionne bien dans Firefox et Chrome, mais dans IE8, l'opacité ne change pas.

J'ai essayé une variété de paramètres CSS sans succès.

Par exemple

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

Qu'est-ce qui empêche IE de changer l'opacité? Remarque: j'ai essayé cela sur une variété d'éléments différents, en inversant l'ordre des instructions CSS et en utilisant simplement celles d'IE. J'ai aussi essayé d'utiliser

-ms-filter: "alpha(opacity=75)";

mais sans succès.

Je suis à court de choses pour essayer de faire fonctionner la modification d'opacité dans IE8.

Des idées?

Aucune idée si cela s'applique toujours à 8, mais historiquement, IE n'applique pas plusieurs styles aux éléments qui n'ont pas de «disposition».

voir: http://www.satzansatz.de/cssd/onhavinglayout.html

Les définir (exactement comme je l'ai écrit) m'a servi lorsque j'en avais besoin:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

Vous devez d'abord définir Opacity pour les navigateurs conformes aux normes, puis les différentes versions d'IE. Voir l'exemple:

mais ce code d'opacité ne fonctionne pas dans ie8

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Notez que j'ai éliminé -moz car Firefox est un navigateur conforme aux standards et cette ligne n'est plus nécessaire. De plus, -khtml est déprécié, j'ai donc éliminé ce style également.

De plus, les filtres d'IE ne seront pas validés selon les normes w3c, donc si vous voulez que votre page soit validée, séparez votre feuille de style de normes de votre feuille de style IE en utilisant une instruction if IE comme ci-dessous:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

Si vous séparez les bizarreries ie, votre site validera très bien.

Apparemment, la transparence alpha ne fonctionne que sur les éléments de niveau bloc dans IE 8. Définir affichage: bloc.

L'utilisation display: inline-block;fonctionne sur IE8 pour résoudre ce problème.

FWIW, opacity: 0.75fonctionne sur tous les navigateurs conformes aux normes.

CSS

J'avais l'habitude d'utiliser ce qui suit de CSS-Tricks :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Boussole

Cependant, une meilleure solution consiste à utiliser le mixin Opacity Compass , tout ce que vous avez à faire est de le faire @include opacity(0.1);et il se chargera de tous les problèmes entre navigateurs. Vous pouvez trouver un exemple ici .

voici la réponse pour IE 8

ET CELA FONCTIONNE pour que alpha fonctionne dans IE8, vous devez utiliser l'attribut de position pour cet élément comme

position: relative ou autre.

http://www.codingforums.com/showthread.php?p=923730

Aucune des réponses ci-dessus n'a fonctionné pour moi, alors j'ai simplement donné à ma balise DIV une image d'arrière-plan transparente, qui fonctionnait parfaitement pour tous les navigateurs.

Ce code fonctionne

filter: alpha(opacity = 50); zoom:1;

Vous devez ajouter une propriété de zoom pour que cela fonctionne :)

Vous pouvez également ajouter un polyfil pour activer l'utilisation de l'opacité native dans IE6-8.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

Il s'agit d'un polyfil autonome qui ne nécessite pas jQuery ou d'autres bibliothèques. Il y a plusieurs petites mises en garde, il ne fonctionne pas sur les styles en ligne et pour toutes les feuilles de style qui nécessitent une opacité polyfilée, elles doivent adhérer à la politique de sécurité de la même origine.

L'utilisation est très simple

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>