Farbe transparent in IE8?

Bekam ich ein wenig Kopfschmerzen von trying to get Farbe:transparenter arbeiten in IE8.

Grundsätzlich, ich habe diese buttons, die entweder die Anker-oder input-Elemente:

<input type="submit" class="button" value="Click me" />
<a class="button" href="SOME_URL">Click me</a>

Beim anklicken dieser Schaltflächen die Klasse loading, ein spinner gif als background-image und Einstellung color:transparent um den text unsichtbar, zeigt den spinner. Dies macht die buttons bleiben die gleiche Größe, wenn Sie angeklickt wird und zeigt den spinner gif.

JEDOCH, IE8 nicht unterstützt Farbe:transparent, und ich habe Schwierigkeiten zu kommen mit eine alternative.

Mit font-size:0, line-height:0, text-indent:-9999 oder ähnliches sind keine guten in diesem Fall, denn das würde es unmöglich machen, um die Größe der Schaltfläche.

Möchte ich löse das mit CSS, wenn möglich, also bitte verschwenden Sie nicht Ihre Zeit, buchen eine JavaScript-Lösung.

Vielleicht filtern könnte möglich sein, das setup für 'Farbe', wie mit Steigungen und "Deckkraft" unten, aber ich hab noch nicht einen Weg finden, das zu tun.

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#ffffff');
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

Jede Eingabe wird geschätzt!

InformationsquelleAutor Henrik Janbell | 2013-09-17
  1. 2

    IE8 nicht verstehen, die rgba Eigentum, also das ist keine gute Antwort. Ich würde versuchen, mit visibility:hidden IE8 versteht das. So, der text nimmt den gleichen Raum, es ist nur ausgeblendet.

    • Das würde verstecken die gesamte Schaltfläche, nicht nur auf den text.
    • Ich erkannte, dass es nicht funktionieren würde für Ihre input. Ich Frage mich, warum line-height oder text-indent nicht für Sie arbeiten? Sind Sie nicht der Angabe von Größen von Ihre buttons in CSS?
    • Nein, ich bin nicht die Angabe von Größen der meine Tasten, da Sie enthalten Texte aus einer Menge von verschiedenen Sprachen, damit nicht der festen Breite.
    • OK, das macht Sinn, warum line-height etc. nicht für Sie arbeiten. Ich bin nicht sicher, dass Sie tun können, eine Reine CSS-Lösung. Mit den filtern haben Sie in Ihrer ursprünglichen Frage, können Sie hinzufügen 00 die Transparenz. Ich bin mir nur nicht sicher, du kannst den text der Schaltfläche. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00000000', EndColorStr='#00ffffff'); Auch, ist es Grund, Sie sind zu vermeiden, JS? Einfach nur neugierig.
    • Gut, ich könnte die JavaScript verwenden, um das Ergebnis, ich will - und ich werde wohl (da dies scheint wie eine Sackgasse). Allerdings princible ich versuchen so wenig styling-Verwandte wie möglich mit JavaScript - idealerweise nur das hinzufügen einer neuen Klasse in einem übergeordneten element, wenn das styling ändern sollte, basierend auf Benutzer-Interaktion. Ich denke, dieser Ansatz führt zu einer saubereren code, der leichter zu pflegen.
    • Wenn Sie nur nicht zu beschwichtigen IE8 🙂 ich schrieb ein kleines JQuery script für Sie, dass entfernen Sie die value von der-Taste. Es wird immer die original - height und width also die Taste bleibt die gleiche Größe, unabhängig von der Sprache. jsfiddle.net/9vEQT/2 viel Glück!!

    InformationsquelleAutor disinfor
Schreibe einen Kommentar