Opacity CSS ne fonctionne pas dans IE8

143

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?

Marcus Downing
la source
Cette question connexe / dupliquée a votre réponse, je pense. stackoverflow.com/questions/859000/opacity-in-web-pages
Jeff Martin
J'ai vu cette question - le problème est la réponse: <br> <br> & nbsp; & nbsp; filtre: alpha (opacité = 50); / * Internet Explorer / <br> & nbsp; & nbsp; opacité: 0,5; / fx, safari, opéra, chrome * / <br> & nbsp; & nbsp; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 50)"; / * IE8 * / <br> <br> ne fonctionne pas pour moi (je viens de réessayer pour vérifier). Je l'ai appliqué à un h3 qui était noir et audacieux. Dans Firefox et Chrome, le paramètre d'opacité rend l'en-tête gris, comme vous vous en doutez, mais dans IE8, il reste noir.
oups - je ne savais pas que vous ne pouviez pas utiliser HTML dans les commentaires - mais je pense que vous pouvez voir ce que j'essaie de dire
si vous essayez ces styles sur une seule couleur unie, fonctionnent-ils? peut-être qu'il y a un autre CSS en cours qui est en conflit.
Jeff Martin
Joli. Oui - quand je fais un simple div, donnez-lui une hauteur et une largeur et une couleur d'arrière-plan rouge, avec ces paramètres d'opacité, cela fonctionne dans IE8. Il sort semi-opaque. J'ai du mal à voir quel est le problème. Je ne modifie pas l'opacité de quoi que ce soit d'autre dans la feuille de style, donc je ne peux pas penser à ce qui pourrait être en conflit avec cela pour IE uniquement.

Réponses:

65

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

Azeem.Butt
la source
9
IE n'applique pas plusieurs styles aux éléments qui "n'ont pas de mise en page".
Azeem.Butt
4
Génial! Merci. C'était ça le problème. Les éléments pour lesquels j'essayais d'ajuster l'opacité (par exemple h3) n'avaient pas de "layout". Une fois que je leur en ai donné, l'opacité a fonctionné. Tout ce que j'ai fait, c'est ajouter de la largeur: 100%; au h3. Merci de m'avoir pointé dans la bonne direction. Cependant, il semble fou (sinon bogué) qu'Internet Explorer fasse cela.
51
IE n'applique pas beaucoup de styles à de nombreux éléments.
danwellman
1
@danwellman et puis il fait beaucoup d'autres trucs "amusants" aussi. Yay.
dudewad
Il est intéressant de noter que IE7 n'a pas besoin de la «mise en page». J'utilise une image d'arrière-plan réactive sur l'élément avec une hauteur nulle et padding-bottom: 100%et dans IE8, l'opacité n'a pas pris effet jusqu'à ce que je définisse la hauteur explicite. IE7 n'en a pas besoin.
Kout le
158

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);
Gabriel McAdams
la source
6
Merci, je crois "filter: alpha (opacity = 70);" est pour IE <8. Cependant, cela ne fonctionne pas (pour moi) dans IE8 (je viens de vérifier). -moz-opacity est maintenant à peu près obsolète, je crois, et l'opacité est la manière standard de faire les choses - donc, naturellement, Microsoft n'a pas utilisé cette façon de faire (beaucoup trop facile).
15
Il suffit de régler "l'opacité" et le "filtre" comme vous le décrivez pour que cela fonctionne pour moi à la fois dans FF4 et IE8. -moz-opacity n'était pas nécessaire.
demoncodemonkey
1
@Gabriel McAdams: filtre: alpha (opacité = 70); travaillé (mais dans IE 8 uniquement)
Poonam Bhatt
@Gabriel Cela a fonctionné un régal! Je n'aurai plus de problèmes d'opacité dans IE 7/8!
MJCoder
1
Informations plus spécifiques: En fait, c'est fadeIn la méthode qui supprime la transparence.
tmorell
49

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.

Kevin Florida
la source
3
Il suffit de régler "l'opacité" et le "filtre" comme vous le décrivez pour que cela fonctionne pour moi à la fois dans FF4 et IE8. La section intitulée "/ * Next 2 lines IE8 * /" n'était pas nécessaire.
demoncodemonkey
3
@demoncodemonkey: Correct. Tout dépend de la version que vous avez installée. Si vous voulez une compatibilité maximale, je vous suggère tous.
Kevin Florida
Correct, mais: "Afin de garantir que les utilisateurs d'Internet Explorer 7 et 8 utilisent le filtre, vous pouvez inclure les deux syntaxes répertoriées ci-dessus. En raison d'une particularité de notre analyseur, vous devez d'abord inclure la syntaxe mise à jour avant l'ancienne syntaxe pour que le filtre fonctionne correctement dans la vue de compatibilité (il s'agit d'un bogue connu qui sera corrigé lors de la version finale d'IE8). Voici un exemple de feuille de style CSS: "(source: lien )
zrathen
@Kevin "Si vous voulez une compatibilité maximale, je vous suggère tous". Eh bien, vous n'auriez pas dû supprimer -moz-opacity, non?
Spooky
Les guillemets ne sont pas nécessaires pour -ms-filter.
thdoan
17

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

Bonnie V.
la source
17

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.

crmpicco
la source
5

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 .

d4nyll
la source
2

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.

Darren Riches
la source
1

Ce code fonctionne

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

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

mejiwara
la source
1

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>
Chris Marisic
la source