it-swarm.com.de

Deckkraft CSS funktioniert nicht in IE8

Ich verwende CSS, um den Auslösetext für einen jQuery-Schiebeabschnitt anzugeben. Wenn Sie also über den Auslösetext fahren, verwandelt sich der Cursor in einen Zeiger, und die Deckkraft des Auslösetexts wird reduziert, um anzuzeigen, dass der Text eine Klickaktion enthält .

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

Ich habe eine Vielzahl von CSS-Einstellungen ohne Erfolg ausprobiert.

Zum Beispiel

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 hört auf, IE die Deckkraft zu ändern? Hinweis: Ich habe dies an einer Vielzahl von verschiedenen Elementen versucht, die Reihenfolge der CSS-Anweisungen vertauscht und einfach die IE eine für sich selbst. Ich habe es auch versucht

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

aber ohne erfolg.

Ich habe nicht mehr viel zu tun, um die Opazitätsänderung in IE8 zum Laufen zu bringen.

Irgendwelche Ideen?

143
user71463

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

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

65
Azeem.Butt

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

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

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

aber dieser Opazitätscode funktioniert nicht in 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);
}

Beachten Sie, dass ich -moz eliminiert habe, da Firefox einen standardkonformen Browser darstellt und diese Zeile nicht mehr benötigt wird. -Khtml wird ebenfalls abgeschrieben, daher habe ich diesen Stil ebenfalls entfernt.

Darüber hinaus werden die IE-Filter nicht nach W3C-Standards validiert. Wenn Sie also möchten, dass Ihre Seite validiert wird, trennen Sie Ihr Standards-Stylesheet von Ihrem IE Stylesheet mit einem if IE = Aussage wie folgt:

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

Wenn Sie die Macken trennen, wird Ihre Website gut validiert.

49
Kevin Florida

Offenbar funktioniert Alpha-Transparenz nur bei Elementen auf Blockebene in IE 8. Setze display: block.

17
Bonnie V.

Mit display: inline-block; funktioniert in IE8, um dieses Problem zu beheben.

FWIW, opacity: 0.75 funktioniert auf allen standardkonformen Browsern.

17
crmpicco

CSS

Ich habe folgendes aus CSS-Tricks verwendet:

.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 von Opazitätskompass-Mixin . Sie müssen lediglich @include opacity(0.1); ausführen, damit alle browserübergreifenden Probleme behoben werden. Sie können ein Beispiel finden hier .

5
d4nyll

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

2
Darren Riches

hier ist die Antwort für IE 8

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

position: relativ oder anders.

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

2
red

Dieser Code funktioniert

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

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

1
mejiwara

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

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

Dies ist eine eigenständige Polydatei, für die keine jQuery- oder andere Bibliotheken erforderlich sind. Es gibt einige kleine Vorsichtsmaßnahmen, die nicht für Inline-Stile gelten, und für Stylesheets, die Deckkraft benötigen, müssen sie die Sicherheitsrichtlinien von Origin einhalten.

Die Bedienung ist denkbar einfach

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