rgba() funktioniert nicht in IE8

Question

ich nur mit dem RGBA() Manipulation in jQuery IE 8

Bisher habe ich mit hochnäsig haben diese:

$('.set').click(function (e) { 
     var hiddenSection = $('div.hidden'); 
     hiddenSection.fadeIn() 
     .css({ 'display': 'block' }) 
     .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }) 
     .css({ top: ($(window).height() - hiddenSection.height())/2 + 'px', 
      left: ($(window).width() - hiddenSection.width())/2 + 'px' 
     }) 
     .css({ 'background-color': 'rgba(0,0,0,0.5)' }) //Problem here in IE8 
     .appendTo('body'); 
     $('span.close').click(function() { $(hiddenSection).fadeOut(); }); 
}); 

Es funktioniert in allen anderen Browsern, Don Ich weiß nicht, warum es in IE 8 fehlgeschlagen ist Ich habe diesen Fehler!

Invalid property value in jquery.min.js.

Jede Hilfe wird sehr geschätzt!

Dank

Answer 1

Einfache Antwort: IE8 unterstützen Eigenschaften RGBA nicht. Es weiß nur über RGB.

RGBA-Unterstützung wurde nur in IE9 hinzugefügt.

Andere sehr alte Browser haben möglicherweise keine Unterstützung für RGBA. Es gibt jedoch nicht viele alte Browser, die noch verwendet werden, außer IE8.

Es gibt einige Möglichkeiten, wie Sie dieses Problem umgehen könnte:

• ein polyfill verwenden wie CSS3Pie. Dadurch können Sie RGBA-Hintergrundfarben in Ihrem CSS angeben. Sie können es immer noch nicht direkt in JS-Code verwenden, wie Sie es haben, aber Sie könnten die Klasse ändern, um damit umzugehen.

• Verwenden Sie ein Tool wie Modernizr, um festzustellen, ob der Browser diese Funktion unterstützt, und stellen Sie eine andere Funktionalität bereit, wenn dies nicht der Fall ist.

• Verwenden Sie IE8 -ms-filter Stil, um den Transparenzeffekt zu erzielen. Auf diese Weise können Sie eine Reihe von Spezialeffekten einschließlich der Opazität einstellen. Dies ist eine nicht standardmäßige IE-Funktion und wird in IE9/10 durch Standard-CSS ersetzt, ist aber in bestimmten Fällen für ältere IE-Versionen immer noch nützlich.

• Verwenden Sie stattdessen ein kleines PNG-Bild mit einem Alphakanal als Hintergrund. Es ist eine Schande, heutzutage ein Hintergrundbild für einen einfarbigen Hintergrund zu verwenden, aber es wird das Ergebnis erzielen, das Sie in allen Browsern suchen.

Answer 2

Sie haben einen Tippfehler. Es sollte sein:

rgba(0,0,0,0.5) 

Sie haben den 'a' Teil vermisst.

Allerdings bin ich mir nicht sicher, IE8 unterstützt rgba() ... dann wieder, hat jQuery möglicherweise einen Wrapper dafür?

Um sicher zu sein, würde ich versuchen, ein Hintergrundbild im PNG-Format, das Transparenz hat.

.css({ 'background-image': 'http://example.com/myimage.png' }) 

Mikey.

Answer 3

`rgba wird nicht von ie8 unterstützt.

Allerdings gibt es einen Trick für die Transparenz in i.e8

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); 

ersten 2 Ziffer #7F000000 sind Opazität und die nächsten 6 Ziffern sind Hexa-Farbcode.

7f ist das Äquivalent von 50%

So sollte Ihr Code wie folgt aussehen:

.css({ 'background-color': 'rgba(0,0,0,0.5)' }) //Problem here in IE8 
.css({'filter' : 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);'}) //IE Fallback 

Quellen: http://css-tricks.com/rgba-browser-support/

Edit: Nach Derek Henderson Kommentar, ich werde den Code nicht schreiben, aber Wenn Sie das nur noch bei IE8 hinzufügen möchten, überprüfen Sie jQuery.browser

Answer 4

Statt dessen:

.css({ 'background-color': 'rgba(0,0,0,0.5)' }) 

Sie können dies tun:

.css({ 'background-color': 'rgb(0,0,0)', 'opacity': '0.5' }) 

Diese in allen Browsern funktionieren.