据我所知,当元素设置了滤镜时,Internet Explorer 7+会禁用ClearType。
#target {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
另外,请注意许多用户可能会认为禁用ClearType很烦人。请慎用!
你做不到。ClearType是浏览器上的用户设置。任何试图禁用它的CSS最可能是一个bug,而不是一个特性(我注意到它会在某些动态生成或动画元素上被禁用),并且不能依赖它。
无论你对此有什么偏好,可能并不是用户在访问你的网站时的偏好。所以为什么要费心呢?那些不喜欢ClearType的人可能已经将其禁用了。
注意:之所以使用过滤器可行,是因为过滤器不是由浏览器渲染的,而是由其他东西(可能是DirectX,考虑到其中的“DX”)。但我仍然认为这是一种副作用,而不是特性。
注意2:截至IE 9版本,这个问题已经得到修复,正如所有人都告诉过你的,只是你没有听取建议。
Juliano,body{ filter:none }是更好、更清洁的解决方案。在某些情况下,使用不透明度会导致问题。
回答所有ClearType爱好者——我也喜欢ClearType。我认为这是LCD显示器的一项重大进步。问题在于当IE尝试在某些特定元素上使用ClearType时,它看起来比禁用ClearType还要糟糕。这些包括通过javascript淡入视图的元素,以及导入的@font-face字体。如果你喜欢ClearType,那么当IE在这些情况下尝试使用ClearType时,你会讨厌它所做的事情...你的文本看起来又粗又丑。
在这些情况下,如果可能的话应该删除ClearType,以实现你们想要的平滑字体。
没有CSS解决禁用ClearType的方法。你在IE7中做到这一点的原因是浏览器对使用滤镜的元素中的文本呈现方式的副产品。显然IE8处理得更好,所以你不能再使用那个hack(除非实际应用某些滤镜)。
使用ClearType是用户选择,而不是您应该强加于访问者的东西。个人而言,我真的很喜欢ClearType,如果我访问的网站禁用它,我会认为该站看起来真的很糟糕。
文本在不同的浏览器和操作系统中呈现的差异是你必须面对的事实。如果你希望让每个人看起来完全相同,你必须将其制作成图像。
在基于JavaScript/AJAX的解决方案中,ClearType有时看起来很愚蠢,但这个主题可能会回答为什么一些基于jQuery的动画在IE中看起来被破坏了的问题..所以答案是当JavaScript使用不透明度(从100到0的1秒持续时间)进行淡出效果时,ClearType字体将从要淡出的元素中移除,动画看起来非常糟糕。
在一个元素上可以同时使用MS CSS滤镜和启用ClearType字体渲染。只需添加一个子元素并将其CSS“position”设置为“relative”,ClearType就不会被禁用。复制以下内容并尝试。
<style>
#parent{
background-color:white;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=2);
position:relative;
border:solid 1px black;
padding:10px;
width:500px;
}
#child{
position:relative; /*THIS SOLVED THE CLEARTYPE DISABLING PROBLEM IN BOTH IE7 & IE8*/ :)
}
</style>
<div id="parent">
<div id="child">This text should always be smooth</div>
</div>
由于某些原因,定位元素(任何在 { position: relative } 内的元素)-- 在不透明度小于1时无法进行动画处理。