jQuery fadeTo causant texte pixélisé dans IE8 quand font-weight: bold

Question

Je fane dehors, et dans un div:

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

Mais quand je fais cela dans IE 8, il semble que ce peu de CSS:

.formErrors li { font-weight: bold; } 

est à l'origine du texte de revenir assez déformée: (image ci-dessous)

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

Le code HTML Je demande à c'est:

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

Il fonctionne très bien dans Firefox. Des idées s'il vous plaît?

Answer 1

Une solution commune est de définir une couleur d'arrière-plan, si vous ne possédez pas déjà une image:
http://jsbin.com/axapa

.formErrors {background-color:white;} 

Une autre option consiste à utiliser fadeIn et fadeOut: l'animation est jusqu'à laid, mais au moins il finit bien: 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(); 
}); 
}; 

Ce code remplace certaines propriétés de fondu dans JQuery spécifiques à IE. J'ai réussi à obtenir fadeTo pour fonctionner correctement dans IE ici: https://app.tekstme.com/signup/

Answer 3

Je sais que ce fil est vraiment vieux mais j'ai trouvé une solution simple. L'utilisation de l'arrière-plan ne s'appliquait pas à mon cas car j'avais un arrière-plan complexe derrière un texte dont l'arrière-plan devait être transparent. Quoi qu'il en soit, je trouve celui-ci fonctionne assez bien (code CSS pour ajouter):

.formErrors{position:relative;} 

Answer 4

En utilisant < DOCTYPE html > résolu ce problème pour moi dans IE8!. Le texte a l'air encore en bloc pendant le fondu mais par la suite il aplanit