Opacity CSS ne fonctionne pas dans IE8

Question

Je suis à l'aide de CSS pour indiquer le déclenchement de texte pour un jQuery glisser vers le bas de la section: c'est à dire lorsque vous passez la souris sur le déclencheur de texte, le curseur se transforme en pointeur et l'opacité de l'élément déclencheur de texte est réduit à indiquer que le texte a un clic.

Cela fonctionne très bien sous Firefox et Chrome, mais avec IE8 l'opacité ne change pas.

J'ai essayé une variété de CSS paramètres 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;
}

Quel est l'arrêt de la IE changer l'opacité? Note: j'ai essayé cela sur une variété de différents éléments, en l'échangeant tour à l'ordre du CSS, et seulement à l'aide de l'IE sur leur propre. J'ai aussi essayé d'utiliser

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

mais, sans succès.

Je suis à court de choses à essayer d'obtenir une modification de l'opacité de travail dans IE8.

Des idées?

Answer 1

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

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

Answer 2

Aucune idée si cela s'applique encore à 8, mais historiquement, IE n'applique pas plusieurs styles aux éléments qui n'ont pas "layout".

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

Answer 3

Vous devez définir l'Opacité d'abord pour les navigateurs compatibles avec, ensuite, les différentes versions d'IE. Voir L'Exemple:

mais cette opacité code ne fonctionne pas avec 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é l'-moz que Firefox est un navigateur Compatible et que la ligne n'est plus nécessaire. Aussi, -khtml est amorti, donc j'ai éliminé ce style.

En outre, c'est à dire des filtres ne validera pas aux normes w3c, donc si vous voulez que votre page pour valider, séparer vos normes de la feuille de style de votre IE feuille de style en utilisant une si IE déclaration comme ci-dessous:

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

Si vous vous séparez de l'ie bizarreries, votre site sera de valider l'amende juste.

Answer 4

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.

Answer 5

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