Deckkraft-CSS funktioniert in IE8 nicht

143

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?

Marcus Downing
quelle
Diese verwandte / doppelte Frage hat Ihre Antwort, denke ich. stackoverflow.com/questions/859000/opacity-in-web-pages
Jeff Martin
Ich habe diese Frage gesehen - Ärger ist die Antwort: <br> <br> & nbsp; & nbsp; Filter: Alpha (Deckkraft = 50); / * Internet Explorer / <br> & nbsp; & nbsp; Opazität: 0,5; / fx, Safari, Oper, Chrom * / <br> & nbsp; & nbsp; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Deckkraft = 50)"; / * IE8 * / <br> <br> funktioniert bei mir nicht (ich habe es nur noch einmal versucht, um es noch einmal zu überprüfen). Ich habe es auf ein h3 angewendet, das schwarz und fett war. In Firefox und Chrome wird die Überschrift durch die Deckkrafteinstellung wie erwartet grau, in IE8 bleibt sie jedoch schwarz.
oops - wusste nicht, dass Sie HTML nicht in Kommentaren verwenden dürfen - aber ich denke, Sie können sehen, was ich zu sagen versuche
Wenn Sie diese Stile nur mit einem einfarbigen Div ausprobieren, funktionieren sie dann? Vielleicht gibt es ein anderes CSS, das widersprüchlich ist.
Jeff Martin
Schön. Ja - wenn ich ein einfaches Div mache, gib ihm eine Höhe und Breite und eine Hintergrundfarbe von Rot. Mit diesen Deckkrafteinstellungen funktioniert es in IE8. Es kommt halb undurchsichtig heraus. Ich kämpfe jedoch darum, das Problem zu erkennen. Ich ändere die Deckkraft von nichts anderem im Stylesheet, daher kann ich mir nicht vorstellen, was nur für den Internet Explorer in Konflikt damit stehen könnte.

Antworten:

65

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

Azeem.Butt
quelle
9
IE wendet nicht mehrere Stile auf Elemente an, die kein "Layout" haben.
Azeem.Butt
4
Toll! Vielen Dank. Das war das Problem. Die Elemente, für die ich die Deckkraft anpassen wollte (z. B. h3), hatten kein "Layout". Sobald ich ihnen etwas gegeben hatte, funktionierte die Deckkraft. Ich habe nur die Breite hinzugefügt: 100%; zum h3. Danke, dass du mich in die richtige Richtung gelenkt hast. Es scheint jedoch verrückt (wenn nicht fehlerhaft) zu sein, dass Internet Explorer dies tut.
51
IE wendet nicht viele Stile auf viele Elemente an.
Danielwell
1
@danwellman und dann macht es auch viele andere "lustige" Sachen. Yay.
Dudewad
Interessant ist, dass IE7 das ‟Layout” nicht benötigt. Ich verwende ein ansprechendes Hintergrundbild für ein Element mit einer Höhe von Null padding-bottom: 100%und in IE8 wurde die Deckkraft erst wirksam, wenn ich die explizite Höhe festgelegt habe. IE7 braucht das nicht.
Kout
158

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);
Gabriel McAdams
quelle
6
Danke, ich glaube "Filter: Alpha (Deckkraft = 70);" ist für IE <8. Es funktioniert jedoch nicht (für mich) in IE8 (ich habe es gerade überprüft). -moz-Opazität ist jetzt, glaube ich, so gut wie nicht mehr vorhanden, und Opazität ist die Standardmethode, um Dinge zu tun. Daher hat Microsoft diese Methode natürlich nicht verwendet (viel zu einfach).
15
Nur die von Ihnen beschriebene Einstellung "Deckkraft" und "Filter" hat ausgereicht, damit es sowohl in FF4 als auch in IE8 für mich funktioniert. -Moz-Opazität war nicht notwendig.
demoncodemonkey
1
@ Gabriel McAdams: Filter: Alpha (Deckkraft = 70); arbeitete (aber nur in IE 8)
Poonam Bhatt
@ Gabriel Das hat geklappt! Ich werde in IE 7/8 keine Opazitätsprobleme mehr haben!
MJCoder
1
Spezifischere Informationen: Tatsächlich wird die Methode eingeblendet, um die Transparenz zu entfernen.
Tmorell
49

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.

Kevin Florida
quelle
3
Nur die von Ihnen beschriebene Einstellung "Deckkraft" und "Filter" hat ausgereicht, damit es sowohl in FF4 als auch in IE8 für mich funktioniert. Der Abschnitt mit der Bezeichnung "/ * Nächste 2 Zeilen IE8 * /" war nicht erforderlich.
Demoncodemonkey
3
@demoncodemonkey: Richtig. Es hängt alles davon ab, welche Version Sie installiert haben. Wenn Sie maximale Kompatibilität wünschen, schlage ich alle vor.
Kevin Florida
Richtig, aber: "Um sicherzustellen, dass Benutzer von Internet Explorer 7 und 8 den Filter kennen, können Sie beide oben aufgeführten Syntaxen einschließen. Aufgrund einer Besonderheit in unserem Parser müssen Sie zuerst die aktualisierte Syntax vor der älteren Syntax einfügen Damit der Filter in der Kompatibilitätsansicht ordnungsgemäß funktioniert (Dies ist ein bekannter Fehler, der bei der endgültigen Veröffentlichung von IE8 behoben wird). Hier ein Beispiel für ein CSS-Stylesheet: "(Quelle: Link )
zrathen
@ Kevin "Wenn Sie maximale Kompatibilität wünschen, schlage ich alle vor". Na dann hättest du -moz-opacity nicht entfernen sollen, oder?
Spooky
Anführungszeichen sind für -ms-filter nicht erforderlich.
Donnerstag,
17

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

Bonnie V.
quelle
17

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

FWIW opacity: 0.75funktioniert auf allen standardkonformen Browsern.

crmpicco
quelle
5

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 .

d4nyll
quelle
2

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.

Darren Riches
quelle
1

Dieser Code funktioniert

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

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

Mejiwara
quelle
1

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>
Chris Marisic
quelle