问题 使用Internet Explorer筛选器和ClearType


我已经详细阅读了IE在使用过滤器时禁用ClearType的问题,我希望我的结论是错误的。在应用过滤器之后,似乎无法重新打开ClearType(例如, 阴影 要么 Α)。是这样吗?

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

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

一些来源:


10412
2018-03-02 19:59


起源



答案:


有没有办法在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/


11
2018-05-19 15:16



多么好的答案 - 代码示例和聪明的解决方案和一切。感谢您抽出宝贵时间将它们整合在一起。我希望我能两次投票! - Alex Dunae


答案:


有没有办法在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/


11
2018-05-19 15:16



多么好的答案 - 代码示例和聪明的解决方案和一切。感谢您抽出宝贵时间将它们整合在一起。我希望我能两次投票! - Alex Dunae