web-dev-qa-db-fra.com

Opacité CSS ne fonctionne pas dans IE8

J'utilise CSS pour indiquer le texte du déclencheur d'une section de diapositives jQuery: lorsque vous survolez le texte du déclencheur, le curseur se transforme en pointeur et l'opacité du texte du déclencheur 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 déjà essayé cette méthode sur différents éléments, en inversant l'ordre des instructions CSS et en utilisant uniquement celles 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 de l'opacité dans IE8.

Des idées?

cssinternet-explorer-8opacity
143
user71463

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

65
Azeem.Butt

Le réglage de ceux-ci (exactement comme je l’ai écrit) m’a servi quand j’en avais besoin:

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

Vous devez d'abord définir Opacity pour les navigateurs conformes aux normes, puis pour les différentes versions d'IE. Voir 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 normes et que cette ligne n'est plus nécessaire. En outre, -khtml est déprécié, j'ai donc également supprimé ce style.

De plus, les filtres d'IE ne valideront pas les normes w3c. Si vous voulez que votre page soit validée, séparez votre feuille de style de normes de votre feuille de style IE à l'aide d'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, votre site validera parfaitement.

49
Kevin Florida

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

17
Bonnie V.

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

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

17
crmpicco

CSS

J'avais l'habitude d'utiliser le suivant 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 Opacity Compass mixin . Tout ce que vous avez à faire est de @include opacity(0.1); et il s’occupera de tout problème concernant plusieurs navigateurs. Vous pouvez trouver un exemple ici .

5
d4nyll

Aucune des réponses ci-dessus n'a fonctionné pour moi, alors je viens de donner à ma balise DIV une image d'arrière-plan transparente à la place, ce qui a parfaitement fonctionné pour tous les navigateurs.

2
Darren Riches

voici la réponse pour IE 8

AND IT WORKS 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=9237

2
red

Ce code fonctionne

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

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

1
mejiwara

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

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

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

L'utilisation est simple comme bonjour

<!--[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>
1
Chris Marisic