Internet Explorer IE 7 / IE 8 transparente PNGs

Beim fadeIn() oder fadeOut() mit jQuery erscheint im Internet-Explorer 7 und 8 immer noch ein schwarzer Rand um transparente 24-bit PNGs. Ich habe viele Lösungen gesehen, von denen nicht wirklich alle funktionieren.
Hier die 99°-Lösung, die sich sowohl um Hintergrundbilder als auch Bilder im IMG-Tag kümmert.

Der Trick dabei ist eine Kombination aus einem transparenten Hintergrundverlauf und zoom:1 der im IE hasLayout auslöst.

Da ich nicht weiß, wie der IE9+ mit PNGs umgeht, habe ich es auf IE7 und IE8 beschränkt. Die Zeile läßt sich aber auch schnell ändern…

Hier ist eine Online-Testseite

(function($){

	// 99° IE 7/8 fading PNG fix
	$.extend({
		'pngFix': function ( obj ) {
			var vs = parseFloat($.browser.version);
			if (!$.browser.msie || ($.browser.msie && vs < 7 || vs > 8)) return;
			var magic = ';-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);zoom: 1;';
			var clone = ['background-image', 'background-position', 'background-repeat', 'width', 'height'];
			var arr = $('*').filter(function() {
				if (this.nodeName == 'IMG' && $(this).attr('src').indexOf('.png') > -1) return true;
				return (this.currentStyle ? this.currentStyle['backgroundImage'] !== 'none' : document.defaultView.getComputedStyle(this,null).getPropertyValue('background-image') !== 'none');
			});
			$(arr).each( function () {
				
				if (this.nodeName != 'IMG') {
					var ref = $(this);
					ref.wrapInner('
'); $(clone).each( function ( k, v ) { ref.find('.pngfix').css( v, ref.css(v) ); }); ref.css({'background-image':'none'}); ref.find('.pngfix').attr('style', (''+ref.find('.pngfix').attr('style')).split(magic).join('')+magic ); } else { $(this).attr('style', (''+$(this).attr('style')).split(magic).join('')+magic ); } }); } }); })(jQuery); $(function () { $.pngFix(); });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.