ClearType 与 CSS 过滤器中断 - 如何使用 JavaScript 删除属性？答案

【问题标题】：ClearType breaks with CSS filter - How to remove attribute with JavaScript?ClearType 与 CSS 过滤器中断 - 如何使用 JavaScript 删除属性？
【发布时间】：2011-04-10 01:56:19
【问题描述】：

我正在尝试使用 JavaScript 从页面上的文本块中删除 CSS 属性“过滤器”。

原因是在 IE8 中使用过滤器会禁用 ClearType。

我尝试过使用document.getElementById("someDiv").style.removeAttribute('filter'); 和someDiv.style.removeAttribute('filter');，它们不会抛出错误，但没有效果。

任何建议将不胜感激。

感谢阅读，
路易斯

这是一个示例页面：

http://img37.imageshack.us/img37/9057/filteroff.png
过滤掉。

http://img203.imageshack.us/img203/3821/filteron.png
过滤掉。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#eeeeee', gradientType='0');">
<div id="SomeText">
Hi, I'm some text.<br />
How's ClearType handling me?
</div>
<script type="text/javascript">
    document.getElementById("SomeText").style.removeAttribute('filter');
    SomeText.style.removeAttribute('filter');
</script>
</body>
</html>

【问题讨论】：

标签： javascript internet-explorer-8 filter cleartype

【解决方案1】：

可能无法从<div> 中删除过滤器，因为它没有过滤器属性。

<body> 是带有属性的标签；经过一番折腾

document.body.style.filter = '';

移除过滤器（但显然，从整个身体）。

【讨论】：

感谢您查看问题。我认为过滤器属性会被 div 继承——不，等等这没有意义......我似乎无法通过 element.style.filter = '';

【解决方案2】：

您不应该使用过滤器来达到您想要的效果 - 它是旧的 IE 代码，在其他浏览器中不起作用，是的，过滤器仅在正文上，因此您无法将 ClearType 保留在您的文本上.

如果您可以使用 HTML5 文档类型，那么请尝试这些 CSS3 技巧http://css-tricks.com/examples/CSS3Gradient/ - 在 IE8 上使用 HTML 文档类型进行测试，垂直渐变有效。

或者作为最后的手段，您可以创建一个渐变的背景图像（任何宽度），然后使用 repeat-x 而没有 repeat-y - 但它有一个固定的高度作为限制

【讨论】：