IE 正在丢失 ClearType
Posted
技术标签:
【中文标题】IE 正在丢失 ClearType【英文标题】：IE is losing ClearType 【发布时间】：2010-09-29 11:46:44 【问题描述】：我正在经历一些非常奇怪的事情！
我有一个用 JS (jQuery) 隐藏的 div。 像这样：
$('#myDiv').hide();
然后当我像这样进行淡入时：
$("#myDiv").fadeIn('slow');
然后文本在 IE 中会丢失 ClearType，但在 FF 中不会。如果我使用切换插入的淡入淡出，那么一切都很好。
IE 是做什么的，有什么解决方案，因为它看起来很可怕。 （我开启了 ClearType，你可能已经理解了）
【问题讨论】：
【参考方案1】：当对 IE 应用淡入淡出时，它会（至少通过 jquery）应用 dxtransform 类，这将使它失去任何抗锯齿效果，直到其不透明度恢复为 1。
【讨论】：
【参考方案2】：对该主题的快速搜索显示以下内容：
jQuery fadeIn/fadeOut IE cleartype glitch
问题似乎是CSS“过滤器”属性没有自动删除。 解决这个问题最简单的方法是手动删除它：
$('#myDiv').fadeIn('slow', function()
this.style.removeAttribute('filter');
);
正如上面的博文所述，这是一个相当混乱的解决方案。
摘自博文，包括针对此问题的更简洁的解决方案：
这意味着我们每次 想要淡化一个元素，我们需要 删除过滤器属性，它 让我们的代码看起来很乱。
一个简单、更优雅的解决方案将 是包装 .fadeIn() 和 .fadeOut() 具有自定义功能 通过插件接口实现功能 jQuery。该代码将是 相同，但不是直接调用 淡入淡出函数，我们称之为 包装。像这样：
$('#node').customFadeOut('slow', function()
//no more fiddling with attributes here
);
那么，你是如何让它工作的呢？只是 在您之后包含以下代码 包括 jQuery 库 添加的功能。
(function($)
$.fn.customFadeIn = function(speed, callback)
$(this).fadeIn(speed, function()
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
);
;
$.fn.customFadeOut = function(speed, callback)
$(this).fadeOut(speed, function()
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
);
;
)(jQuery);
【讨论】：
grr 为什么他们不能把它放在标准的淡入淡出中。刚刚确认它不在 1.3.1 中（至少在不需要额外配置的情况下）所以可能不存在 即使有了这个解决方案，在我看来它仍然看起来很糟糕。很明显有一个小故障。最好尽量淡化彩色框，让文字瞬间出现 从 jQuery 1.9 开始，jQuery.browser 标识符已被弃用。太棒了... :-( 关于如何通过“特征检测”而不是“浏览器检测”来实现上述代码的任何建议？【参考方案3】：我读过 Firefox 2 使用它自己的文本渲染引擎，只要应用不透明度（至少在 Mac 上）。这有时看起来很奇怪。
我已经用这个 CSS 解决了这个问题（它似乎根本不影响性能）
body
-moz-opacity: 0.99;
这可能也可以在 IE 中使用。哦，但是你需要使用 IE 的专有 filter 属性。
【讨论】：
【参考方案4】：一种方法是在 div 上设置背景颜色（通常）为白色。
【讨论】：
这对我来说已经有好几次了。我认为您需要在淡入或淡出的元素上设置背景颜色。【参考方案5】：好的，这是我有史以来最糟糕的解决方案：
<head>
<script>
$(function()
$(document.body).fadeIn(0);
);
</script>
</head>
<body>
<script>
$(document.body).hide();
</script>
body text
</body>
立即隐藏正文，并在文档完成时将其淡入。然后你基本上禁用了 cleartype。
哦，请不要让任何人这样做。 或者，如果这对你来说真的很有意义，那么好好测试一下。请记住，在加载整个 DOM 之前，您不会看到任何东西。我还看到了一些奇怪的图形故障。
【讨论】：
【参考方案6】：我设法提出了一个有点“通用”的解决方案。如果不透明度介于 0 和 1 之间，removeAttribute 不起作用，所以我的两分钱解决方案如下：
把这段代码放在 jQuery animate 方法定义 (jquery.x.x.x.js) 的第一行之后
animate: function( prop, speed, easing, callback )
var optall = jQuery.speed(speed, easing, callback);
/*
* IE rendering anti-aliasing text fix.
*/
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, complete: function()
if (jQuery.browser.msie)
var alpha = $(this).css('opacity');
if(alpha == 1 || alpha == 0)
this.style.removeAttribute('filter');
if (jQuery.isFunction(old_complete_callback))
old_complete_callback.call(this);
);
// fix END
...
希望这会有所帮助...
【讨论】：
【参考方案7】：我设法提出了一个有点“通用”的解决方案。如果不透明度介于 0 和 1 之间，removeAttribute 不起作用，所以我的两分钱解决方案如下：
将此代码放在jQuery animate方法定义（jquery.x.x.x.js）的第一行之后
animate: function( prop, speed, easing, callback )
var optall = jQuery.speed(speed, easing, callback);
/*
* IE rendering anti-aliasing text fix.
*/
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, complete: function()
if (jQuery.browser.msie)
var alpha = $(this).css('opacity');
if(alpha == 1 || alpha == 0)
this.style.removeAttribute('filter');
if (jQuery.isFunction(old_complete_callback))
old_complete_callback.call(this);
);
// fix END
...
希望这会有所帮助...
【讨论】：
以上是关于IE 正在丢失 ClearType的主要内容，如果未能解决你的问题，请参考以下文章
为啥我在 IE 9 中丢失了有关 Ajax 请求的 cookie 和会话
为啥在 IE 中替换 setInterval div 后我的容器会丢失其内容？