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?
quelle
Antworten:
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
quelle
padding-bottom: 100%
und in IE8 wurde die Deckkraft erst wirksam, wenn ich die explizite Höhe festgelegt habe. IE7 braucht das nicht.Das Einstellen dieser (genau wie ich geschrieben habe) hat mir gedient, als ich es brauchte:
quelle
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
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:
Wenn Sie die Macken trennen, wird Ihre Site einwandfrei validiert.
quelle
Anscheinend funktioniert Alpha-Transparenz nur für Elemente auf Blockebene in IE 8. Set display: block.
quelle
Verwenden von
display: inline-block;
funktioniert auf IE8, um dieses Problem zu beheben.FWIW
opacity: 0.75
funktioniert auf allen standardkonformen Browsern.quelle
CSS
Früher habe ich die folgende aus verwenden CSS-Tricks :
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 .quelle
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
quelle
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.
quelle
Dieser Code funktioniert
Sie müssen eine Zoom-Eigenschaft hinzufügen, damit es funktioniert :)
quelle
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
quelle