internet-explorer - 使用 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 is losing ClearType
• Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery

Answer 1

Is there a way to enable both ClearType and filters in Internet Explorer?

没有。过滤器出现于 Internet Explorer 中的 ClearType 支持之前，并且从未设计用于部分透明。您链接到的博文中的问题从未得到解决，而且随着最新浏览器中 CSS3 的改进，过滤器的 future 前景黯淡。

但是，您可以使用一些技巧来近似 Internet Explorer 中的text-shadow。不同的方法包括将元素的副本直接放置在下方，其中包含相同的文本，但应用模糊或阴影滤镜。

双标记方法，适用于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);
}

Working example: http://jsfiddle.net/PdZxB/

对于 IE6，您需要省略直接后代选择器 >。不过，它在 IE 6 中看起来不太好。

---

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

到目前为止，最简单的方法是不需要 JavaScript 的方法，但仅适用于 IE 8 和 IE 9，因为它依赖于 :before 伪类和 CSS attr() 函数。它确实需要 targeting CSS towards specific versions of 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);
}

Working example: http://jsfiddle.net/zFYga/

此方法的分步指南位于 http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/ .