jQuery fadeTo, вызывающий неровный текст в IE8 при весе шрифта:смелый
Вопрос
Я выцветаю, и в 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.Текст по-прежнему выглядит блочным во время затухания, но впоследствии он разглаживается