使用 Internet Explorer 过滤器和 ClearType

Posted 2023-03-15

【中文标题】使用 Internet Explorer 过滤器和 ClearType

【英文标题】：Using Internet Explorer filters and ClearType

【发布时间】：2011-07-07 13:24:46

【问题描述】：

我已经详细阅读了有关 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

【参考方案1】：

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

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

不过，您可以使用一些技巧在 Internet Explorer 中逼近 text-shadow。不同的方法包括将元素的副本直接放置在下方，包含相同的文本但应用 Blur 或 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);

工作示例：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);

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

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

【讨论】：

多么棒的答案——代码示例和巧妙的修复等等。感谢您花时间整理这些。我希望我能投票两次！