jQuery fadeTo, вызывающий неровный текст в IE8 при весе шрифта:смелый

StackOverflow https://stackoverflow.com/questions/1865806

  •  18-09-2019
  •  | 
  •  

Вопрос

Я выцветаю, и в div:

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

Но когда я делаю это в IE 8, кажется, что это часть CSS:

.formErrors li { font-weight: bold; }

Приводит ли к тому, что текст возвращается сильно искаженным:(изображение ниже)

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

HTML, к которому я применяю это, является:

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

Это прекрасно работает в Firefox.Пожалуйста, есть какие-нибудь идеи?

Это было полезно?

Решение

Распространенным решением является определение цвета фона, если у вас еще нет изображения:
http://jsbin.com/axapa

.formErrors {background-color:white;}

Другой вариант заключается в использовании fadeIn и fadeOut:анимация пока некрасивая, но, по крайней мере, заканчивается она красиво: http://jsbin.com/aboxa

Другие советы

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();  
});
};

Этот код переопределит некоторые свойства fade в jQuery, специфичные для IE.Мне удалось успешно заставить fadeTo правильно работать в IE здесь: https://app.tekstme.com/signup/

Я знаю, что эта тема действительно старая, но я нашел простое решение.Использование фона было неприменимо для моего случая, потому что у меня был сложный фон за текстом, фон которого должен был быть прозрачным.В любом случае, я обнаружил, что этот работает довольно хорошо (нужно добавить css-код):

.formErrors{position:relative;}

Использование <!DOCTYPE html> исправлена эта проблема для меня в IE8.Текст по-прежнему выглядит блочным во время затухания, но впоследствии он разглаживается

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top