Opazität CSS funktioniert nicht in IE8

Ich bin mit CSS zeigen die trigger-text für eine jQuery slide-down-Abschnitt: d.h. wenn Sie den Mauszeiger über den Auslöser-text der cursor zu einem Zeiger und der Deckkraft der trigger text wird reduziert, um anzuzeigen, dass der text eine Klick-Aktion.

Dies funktioniert gut in Firefox und Chrome, aber im IE8 die Deckkraft nicht ändern.

Habe ich versucht eine Vielzahl von CSS-Einstellungen, ohne Erfolg.

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 DH die änderung der Deckkraft? Hinweis: ich habe versucht, diese auf eine Vielzahl von verschiedenen Elementen, austauschen Runde die Reihenfolge der CSS-Anweisungen, und nur mit dem IE auf Ihre eigenen. Ich habe auch versucht, mit Hilfe

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

aber ohne Erfolg.

Ich habe aus der Dinge zu versuchen, um die Deckkraft änderung funktioniert im IE8.

Irgendwelche Ideen?

Kommentar zu dem Problem
Dieser Zusammenhang/doppelte Frage hat Ihre Antwort, die ich denke. stackoverflow.com/questions/859000/opacity-in-web-pages Kommentarautor: Jeff Martin
Ich sah, dass Frage - ärger ist die Antwort: <br> <br>&nbsp;&nbsp; filter: alpha(opacity=50); /* internet explorer / <br>&nbsp;&nbsp; opacity: 0.5; / fx, safari, opera, chrome */ <br>&nbsp;&nbsp; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/<br> <br>bei mir nicht funktioniert (ich habe gerade versucht es wieder zu überprüfen). Ich wendete Sie auf eine h3, die war schwarz und Fett. In Firefox und Chrome die Einstellung "Deckkraft" stellt die überschrift Grau, wie man erwarten würde, aber im IE8-es bleibt schwarz. Kommentarautor:
oops - wusste nicht, dass Sie nicht bekommen, um die Verwendung von HTML in den Kommentaren - aber ich denke, man kann sehen, was ich zu sagen versuche Kommentarautor:
wenn Sie versuchen, die Stile, die auf nur eine solide Farbe, div funktionieren Sie? vielleicht gibt es einige andere CSS geht, die im Konflikt. Kommentarautor: Jeff Martin
Nice one. Ja - wenn ich ein einfaches div, geben Sie eine Höhe und Breite und eine Hintergrundfarbe (background-color rot, mit denen Deckkraft-Einstellungen, es funktioniert im IE8. Es kommt heraus, semi-blickdicht. Ich bin kämpfen, um zu sehen, was das problem ist obwohl. Ich bin mir nicht ändern die Deckkraft etwas anderes in der stylesheet, also ich kann mir nicht denken, was sein könnte in Konflikt mit es für nur IE. Kommentarautor:

InformationsquelleAutor der Frage | 2009-12-22

  1. 65

    Keine Ahnung, ob das immer noch gilt-bis 8 -, aber historisch gesehen also die nicht wenden Sie verschiedene Stile auf Elemente, die sich nicht "haben " layout".

    finden Sie unter: http://www.satzansatz.de/cssd/onhavinglayout.html

    InformationsquelleAutor der Antwort Azeem.Butt

  2. 157

    Diese Einstellung (genau wie ich geschrieben habe) diente mir, wenn ich Sie brauchte:

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

    InformationsquelleAutor der Antwort Gabriel McAdams

  3. 48

    Müssen Sie die Deckkraft ersten für Standard-konforme Browser, dann die verschiedenen Versionen des IE. Siehe Beispiel:

    aber diese Deckkraft code 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 eliminiert -moz Firefox ist ein Standards-Konforme browser und die Linie ist nicht mehr notwendig. Auch, -khtml ist abgeschrieben, also habe ich beseitigt, dass der Stil ebenso.

    Außerdem, IE-Filter nicht validieren, um w3c-standards, so dass, wenn Sie möchten, dass Ihre Seite zu überprüfen, trennen Sie Ihre standards stylesheet von IE-stylesheet mithilfe einer if IE Anweisung wie folgt:

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

    Wenn Sie trennen Sie die ie Macken, Ihre Website wird überprüft, in Ordnung.

    InformationsquelleAutor der Antwort Kevin Florida

  4. 17

    Scheinbar die alpha-Transparenz funktioniert nur auf block-level-Elemente im IE 8. Set display: block.

    InformationsquelleAutor der Antwort Bonnie V.

  5. 17

    Mit display: inline-block; funktioniert auf IE8 um dieses problem zu beheben.

    FWIW, opacity: 0.75 funktioniert auf allen Standard-konformen Browsern.

    InformationsquelleAutor der Antwort crmpicco

  6. 5

    CSS

    Nutzte ich die folgenden aus 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

    Jedoch eine bessere Lösung ist die Verwendung der Deckkraft Compass mixin, alles, was Sie tun müssen, ist, um @include opacity(0.1); und es kümmert sich um alle cross-browser-Probleme für Sie. Ein Beispiel finden Sie hier.

    InformationsquelleAutor der Antwort d4nyll

  7. 2

    hier ist die Antwort für IE 8

    UND ES FUNKTIONIERT für alpha arbeiten in IE8 verwenden Sie die position atribute für das element wie

    position:relative oder anderen.

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

    InformationsquelleAutor der Antwort red

  8. 2

    Keiner der oben genannten Antworten für mich gearbeitet, so dass ich nur gab mein DIV-tag ein transparentes Hintergrundbild statt, das funktionierte perfekt für alle Browser.

    InformationsquelleAutor der Antwort Darren Riches

  9. 1

    Dieser code funktioniert

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

    Müssen Sie die zoom-Eigenschaft für die es zu arbeiten 🙂

    InformationsquelleAutor der Antwort mejiwara

  10. 1

    Können Sie auch hinzufügen, eine polyfil, um native Deckkraft Nutzung im IE6-8.

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

    Dies ist ein stand-alone-polyfil, die nicht erfordert jQuery oder anderen Bibliotheken. Es gibt einige kleine Einschränkungen, es funktioniert nicht mit inline-styles und für jeden style sheets, die Sie brauchen, Deckkraft polyfil würde Sie einhalten müssen, um die same-origin-security-policy.

    Nutzung ist tot 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>

    InformationsquelleAutor der Antwort Chris Marisic

Schreibe einen Kommentar