当 font-weight: 粗体时，jQuery FadeTo 在 IE8 中导致像素化文本

发布于 2024-08-13 09:07:07 字数 629 浏览 5 评论 0原文

我正在淡出，并在 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 中运行良好。有什么想法吗？

原文

I am fading out, and in a div:

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

But when I do this in IE 8, it seems this bit of CSS:

.formErrors li { font-weight: bold; }

Is causing the text to come back quite distorted: (image below)

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

The HTML I am applying this to is:

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

It works fine in Firefox. Any ideas please?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初吻给了烟 2024-08-20 09:07:07

如果您还没有图像，常见的解决方案是定义背景颜色：
http://jsbin.com/axapa

.formErrors {background-color:white;}

另一种选择是使用 fadeIn 和 fadeOut：动画很丑，但至少结局很好：http://jsbin.com/阿博萨

A common solution is to define a background color, if you don't already have an image:
http://jsbin.com/axapa

.formErrors {background-color:white;}

Another option is to use fadeIn and fadeOut: the animation is till ugly, but at least it ends up nicely: http://jsbin.com/aboxa

回复收藏 0 原文

风渺 2024-08-20 09:07:07

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

此代码将覆盖 JQuery 中特定于 IE 的一些淡入淡出属性。我能够成功地让 fadeTo 在 IE 中正常工作： https://app.tekstme.com/signup/

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

This code will override some fade properties in JQuery specific to IE. I was able to successfully get fadeTo to work properly in IE here: https://app.tekstme.com/signup/

回复收藏 0 原文

抱着落日 2024-08-20 09:07:07

我知道这个线程确实很旧，但我找到了一个简单的解决方案。使用背景不适用于我的情况，因为我的文本后面有一个复杂的背景，其背景必须是透明的。无论如何，我发现这个工作得很好（要添加的 CSS 代码）：

.formErrors{position:relative;}

I know this thread is really old but i found a simple solution. Using background was not applicable for my case because i had a complex background behind text whose background had to be transparent. Anyway I found this one working pretty well (css code to add):