Ich verwende CSS, um den Triggertext für einen jQuery-Slidedown-Abschnitt anzugeben: Wenn Sie den Mauszeiger über den Triggertext bewegen, ändert sich der Cursor in einen Zeiger, und die Deckkraft des Triggertextes wird verringert, um anzuzeigen, dass der Text eine Klickaktion hat .

Dies funktioniert gut in Firefox und Chrome, aber in IE8 ändert sich die Deckkraft nicht.

Ich habe verschiedene CSS-Einstellungen ohne Erfolg ausprobiert.

Beispielsweise

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;
}

Was hindert den IE daran, die Deckkraft zu ändern? Hinweis: Ich habe dies an verschiedenen Elementen versucht, indem ich die Reihenfolge der CSS-Anweisungen vertauscht und nur die IE-Anweisungen selbst verwendet habe. Ich habe es auch versucht

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

aber ohne Erfolg.

Mir sind die Dinge ausgegangen, um zu versuchen, die Opazitätsänderung in IE8 zum Laufen zu bringen.

Irgendwelche Ideen?

Keine Ahnung, ob dies immer noch für 8 gilt, aber in der Vergangenheit wendet der IE nicht mehrere Stile auf Elemente an, die kein "Layout" haben.

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

Das Einstellen dieser (genau wie ich geschrieben habe) hat mir gedient, als ich es brauchte:

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

Sie müssen die Deckkraft zuerst für standardkonforme Browser und dann für die verschiedenen IE-Versionen festlegen. Siehe Beispiel:

aber dieser Deckkraftcode funktioniert in ie8 nicht

.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);
}

Beachten Sie, dass ich -moz eliminiert habe, da Firefox ein standardkonformer Browser ist und diese Zeile nicht mehr benötigt wird. Außerdem wird -khtml abgeschrieben, sodass ich diesen Stil ebenfalls eliminiert habe.

Darüber hinaus werden die Filter des IE nicht nach w3c-Standards validiert. Wenn Sie also möchten, dass Ihre Seite validiert wird, trennen Sie Ihr Standard-Stylesheet von Ihrem IE-Stylesheet, indem Sie eine if IE-Anweisung wie folgt verwenden:

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

Wenn Sie die Macken trennen, wird Ihre Site einwandfrei validiert.

Anscheinend funktioniert Alpha-Transparenz nur für Elemente auf Blockebene in IE 8. Set display: block.

Verwenden von display: inline-block;funktioniert auf IE8, um dieses Problem zu beheben.

FWIW opacity: 0.75funktioniert auf allen standardkonformen Browsern.

CSS

Früher habe ich die folgende aus verwenden 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;
}

Kompass

Eine bessere Lösung ist jedoch die Verwendung des Opacity Compass-Mixins . Sie müssen lediglich Folgendes tun @include opacity(0.1);, um alle browserübergreifenden Probleme für Sie zu beheben. Ein Beispiel finden Sie hier .

Hier ist die Antwort für IE 8

UND ES FUNKTIONIERT, damit Alpha in IE8 funktioniert. Sie müssen position atribute für dieses Element wie verwenden

Position: relativ oder andere.

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

Keine der oben genannten Antworten hat bei mir funktioniert, daher habe ich meinem DIV-Tag stattdessen ein transparentes Hintergrundbild gegeben, das für alle Browser perfekt funktioniert.

Dieser Code funktioniert

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

Sie müssen eine Zoom-Eigenschaft hinzufügen, damit es funktioniert :)

Sie können auch eine Polydatei hinzufügen, um die native Opazitätsverwendung in IE6-8 zu aktivieren.

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

Dies ist eine eigenständige Polydatei, für die weder jQuery noch andere Bibliotheken erforderlich sind. Es gibt einige kleine Einschränkungen, die bei Inline-Stilen nicht gelten, und für Stylesheets, für die eine Opazitätspolyfilisierung erforderlich ist, müssen die Sicherheitsrichtlinien des gleichen Ursprungs eingehalten werden.

Die Verwendung ist kinderleicht

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