jQuery fadeTo verursacht pixelig Text in IE8, wenn font-weight: bold

Question

Ich Ausblendung und in einem div:

$('.formErrors').fadeTo('fast', 0); 
$('.formErrors').fadeTo('slow', 1); 

Aber wenn ich dies tun in IE 8, so scheint es, dieses Stück CSS:

.formErrors li { font-weight: bold; } 

verursacht den Text ganz verzerrt zurück zu kommen: (Bild unten)

http://www.newmania.com/images/error.jpg

Die HTML ich dies beantrage ist:

<div class="formErrors"> 
There are errors in your submission. Please fix the following and try again: 
<ul><li>Action is empty</li></ul> 
</div> 

Es funktioniert in Firefox in Ordnung. Irgendwelche Ideen bitte?

Answer 1

Eine gemeinsame Lösung ist eine Hintergrundfarbe zu definieren, wenn Sie nicht bereits ein Bild haben:
http://jsbin.com/axapa

.formErrors {background-color:white;} 

Eine weitere Option ist fadeIn und fadeOut zu verwenden: die Animation bis hässlich, aber zumindest endet es auf den: http://jsbin.com/aboxa

Answer 2

jQuery.fn.fadeIn = function(speed, callback) { 
return this.animate({opacity: 'show'}, speed, function() { 
    if (jQuery.browser.msie) 
     this.style.removeAttribute('filter'); 
    if (jQuery.isFunction(callback)) 
     callback(); 
}); 
}; 
jQuery.fn.fadeOut = function(speed, callback) { 
return this.animate({opacity: 'hide'}, speed, function() { 
    if (jQuery.browser.msie) 
     this.style.removeAttribute('filter'); 
    if (jQuery.isFunction(callback)) 
     callback(); 
}); 
}; 
jQuery.fn.fadeTo = function(speed,to,callback) { 
return this.animate({opacity: to}, speed, function() { 
    if (to == 1 && jQuery.browser.msie) 
     this.style.removeAttribute('filter'); 
    if (jQuery.isFunction(callback)) 
     callback(); 
}); 
}; 

Dieser Code wird einige verblassen Eigenschaften in JQuery spezifisch für IE außer Kraft setzen. Ich konnte erfolgreich fadeTo hier richtig arbeiten im IE: https://app.tekstme.com/signup/

Answer 3

Ich weiß, dass dieser Thread wirklich alt ist, aber ich fand eine einfache Lösung. Die Verwendung des Hintergrunds war für meinen Fall nicht anwendbar, weil ich hinter einem Text, dessen Hintergrund transparent sein musste, einen komplexen Hintergrund hatte. Auf jeden Fall fand ich diese ziemlich gut (CSS-Code hinzufügen) arbeiten:

.formErrors{position:relative;} 

Answer 4

Mit < DOCTYPE html > dieses Problem für mich in IE8 behoben!. Der Text sieht immer noch blockartig während der Überblendung aus, aber danach glättet er