使用Internet Explorer筛选器和ClearType [英] Using Internet Explorer filters and ClearType

问题描述

我详细阅读了关于在使用过滤器时禁用ClearType的问题，我希望我的结论是错误的。看起来，在应用过滤器之后重新打开ClearType是不可能的（例如阴影或α）。是这样吗？

现在每一个支持 text-shadow d真的很希望能够使用它，在必要的时候回到IE的 Shadow 或者 DropShadow 过滤器上。但是，在文本中应用任何过滤器都会使它看起来很糟糕。

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

有些来源：

• http://blogs.msdn.com/b/ie/archive/2006/08/31/730887.aspx
>

• IE正在失去ClearType


• 更正IE Cleartype / Filter使用jQuery动画处理文本不透明时出现的问题
  

解决方案

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

没有。过滤器在Internet Explorer中支持ClearType之前，并且从未设计为使用部分透明度。您链接到的博客文章中的问题从来没有修复过，在最新的浏览器中使用CSS3进行了改进，未来对于过滤器来说是暗淡的。

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

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

假设您正在适中地使用阴影，例如一个章节标题或图片说明，您可以将文本复制到两个单独的元素，并将其放在后面，使用过滤器模糊它：

 < h1>< span class =。shadow>恐惧我的阴影< / span>< span>恐惧我的阴影< / span>< ; / H1> 
  

body {background-color ：lightgreen; }
h1 {
颜色：白色;
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; } / *对于非IE浏览器* /
.ie> h1> span {
position：absolute;
颜色：白色;
}
.ie> h1> span.shadow {
display：inline-block;
zoom：1;
颜色：＃333;
filter：progid：DXImageTransform.Microsoft.Blur（pixelradius = 2）;




$ b

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

对于IE6，您需要省略直接后代选择器> 。虽然在IE 6中看起来并不怎么样。

---

简易方法—使用：之前和 attr（）

到目前为止最简单的方法是不需要JavaScript，但只能在IE 8和IE 9中使用，因为它依赖于：伪类和CSS attr（）函数。它确实需要针对CSS的特定版本的IE < a>，但是。

  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元素有布局* / 
颜色：＃333; 
 filter：progid：DXImageTransform.Microsoft.Blur（pixelradius = 2）; 
} 
 .ie8and9> h1：在{
位置：绝对; 
颜色：白色; 
 content：attr（data-innertext）; 
 
 
 
 
 $ b 
 
 
 工作示例： http://jsfiddle.net/zFYga/   
 
 
此方法的分步指南位于 http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie -part-i / 。 
I've read at length about issues with IE disabling ClearType when using filters, and I'm hoping that my conclusions are wrong.  It seems that it is impossible to turn ClearType back on after applying a filter (e.g. Shadow or Alpha).  Is that so?

With every other browser supporting text-shadow now I'd really like to be able to use it, falling back on IE's Shadow or DropShadow filter when necessary.  But applying any filter to text makes it look terrible.

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

Some sources:


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

解决方案

  
Is there a way to enable both ClearType and filters in Internet Explorer?
No. Filters came before ClearType support in Internet Explorer and were never designed to work with partial transparency.  The issue in the blog post you linked to was never fixed and, with CSS3 improvements in the latest browsers, the future's bleak for filters.

There are some tricks you can use to approximate text-shadow in Internet Explorer, however.  The varying approaches involve positioning a copy of the element directly below, containing the same text but applying the Blur or Shadow filters.




Double-markup method, works for IE 6-9

Assuming you're applying the shadow in moderation, for example to a section title or photo caption, you can duplicate the text into two separate elements and position one at the back, blurring it with a filter:
<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/
For IE6, you need to omit the direct-descendant selector >.  It doesn't look so great in IE 6, though.


Easy method — using :before and attr()

By far the easiest approach is the one that requires no JavaScript, but works only in IE 8 and IE 9 because it relies on the :before pseudo-class and CSS attr() function.  It does require targeting CSS towards specific versions of IE, though.
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/
A step-by-step guide to this method is located at http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/.

                        
这篇关于使用Internet Explorer筛选器和ClearType的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！