使用Internet Explorer筛选器和ClearType

Question

我已经详细阅读了IE在使用过滤器时禁用ClearType的问题,我希望我的结论是错误的.在应用过滤器(例如Shadow或Alpha)后,似乎无法重新打开ClearType .是这样吗？

现在每个其他浏览器都支持text-shadow我真的希望能够使用它,在必要时回退到IE Shadow或DropShadow过滤器.但是对文本应用任何过滤器会让它看起来很糟糕.

有没有办法在Internet Explorer中启用ClearType和过滤器？

一些来源:

• http://blogs.msdn.com/b/ie/archive/2006/08/31/730887.aspx
• IE正在失去ClearType
• 使用jQuery动画文本的不透明度时,修正IE Cleartype/Filter问题

Answer 1

有没有办法在Internet Explorer中启用ClearType和过滤器？

不会.过滤器在Internet Explorer中支持ClearType之前,并且从未设计为使用部分透明度.您链接到的博客文章中的问题从未得到解决,并且随着最新浏览器中的CSS3改进,未来的过滤器黯淡无光.

但是,您可以使用一些技巧来text-shadow在Internet Explorer中进行近似.不同的方法包括直接在下面定位元素的副本,包含相同的文本,但应用模糊或阴影过滤器.

双标记方法,适用于IE 6-9

假设您正在适度应用阴影,例如应用于节标题或照片标题,您可以将文本复制到两个单独的元素中,并将一个位置放在后面,使用过滤器模糊它:

<h1><span class=".shadow">Fear my shadow!</span><span>Fear my shadow</span></h1>

body { background-color: lightgreen; }
h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.shadow { display: none; } /* For non-IE browsers */
.ie > h1 > span {
    position: absolute;
    color: white;
}
.ie > h1 > span.shadow { 
    display: inline-block;
    zoom: 1;
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

工作示例:http://jsfiddle.net/PdZxB/

对于IE6,您需要省略直接后代选择器>.不过,它在IE 6中看起来并不那么好.

简单的方法 - 使用:before和attr()

到目前为止,最简单的方法是不需要JavaScript的方法,但仅适用于IE 8和IE 9,因为它依赖于:before伪类和CSS attr()函数.但它确实需要将CSS定位到特定版本的IE.

h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.ie8and9 > h1 {
    zoom: 1; /* make element have layout */
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
.ie8and9 > h1:before {
    position: absolute;
    color: white;
    content: attr(data-innertext);
}

工作示例:http://jsfiddle.net/zFYga/

有关此方法的分步指南,请访问http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/.