IE文本渲染渐变

时间:2010-12-21 14:34:13

标签: internet-explorer filter css3 internet-explorer-9 text-rendering

IE 8及更低版本渲染文本,如果它超过任何已应用“过滤器”的元素。没有什么比这更令人惊讶的了。我通常只是避免使用“过滤器”。但是,我在IE9中做了一些测试,我注意到了一个巨大的问题;在应用了css3渐变或框阴影的任何元素上渲染的文本,文本渲染将被销毁。不仅是直接在元素顶部的文本,而且是z-index中渐变之上的每个元素。例如,如果我使用渐变定义页面的背景,将其覆盖在纯白色div中,然后在其上面渲染文本,它仍然很糟糕。我真的希望这只是一个测试版问题,将在最终版本中解决。我一直在使用代码here,暂时使用渐变(减去过滤器),但现在在IE9中,使用这种技术的所有页面看起来都很糟糕。有没有人知道这件事 - 当我用Google搜索时,我找不到任何关于这个问题的内容。

2 个答案:

答案 0 :(得分:0)

IE演示: -

http://samples.msdn.microsoft.com/workshop/samples/author/filter/gradient.htm

语法 HTML

<ELEMENT STYLE=
"filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)" ... >

Internet Explorer 5.5或更高版本 例如: -

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>

启用了布尔属性,您可以为其设置false或true http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

CSS gradients in IE7 & IE8 is causing text to become aliased

示例:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";

答案 1 :(得分:0)

四年后,我认为可以说这是一个测试版问题。

在IE 8中打开示例没有明显的问题,除了在Windows XP等平台上的IE 8中总是蹩脚的抗锯齿。

很多都改变了。