IE7 和 IE8 中的 CSS 渐变导致文本出现锯齿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2503920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS gradients in IE7 & IE8 is causing text to become aliased
提问by Cory
I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).
我试图在包含一些文本的 div 中使用 CSS 渐变。使用 Gecko 和 Webkit，文本显示良好。在 IE7 和 IE8 中，文本显示为锯齿状（锯齿状）。
I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".
我看到这篇博客说：“我们决定在使用任何 DXTransform 的元素上禁用 ClearType”。
IE Blog: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
IE 博客：http: //blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?
那是在 2006 年；3.5 年后，我认为这个错误会被修复，但事实并非如此。有没有办法在 IE8 中做到这一点，而无需在 div 中填充重复的背景图像？
Here's an example of what I mean.
这是我的意思的一个例子。
<style>
div
{ height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>
<div>Hello World</div>
<p>Normal text</p>
In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.
在 IE 中，div 中的文本带有别名（锯齿状），而段落中的文本则没有。
Any solution that doesn't involve images would be greatly appreciated.
任何不涉及图像的解决方案将不胜感激。
回答by Már ?rlygsson
There's no goodsolution to this problem.
这个问题没有很好的解决办法。
Worse yet: progid:DXImageTransform.Microsoft.gradientis horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element alsotriggers a seperateclick on whichever element that happens to be positions behind it. Beware!
更糟糕的是：progid:DXImageTransform.Microsoft.gradient是可怕的错误，因此鼠标事件（悬停，单击等）从它右侧通过 - 单击这样的元素也会触发单独单击恰好位于其后面位置的任何元素。谨防！
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
无论如何，您最好开始考虑您认为可以接受的回退/解决方法/NastyHacks。
Here are a few ideas off the top of my mind - in order of my personal preference:
以下是我脑海中的一些想法 - 按照我的个人喜好排序：
Just fall-back to a plain solid
background-colorin IE and move on with your life. (Be sure to place thatbackgroundrule firstfor it to be safely overridden/ignored by FF and Webkit.)Use a
background-imagein IE. (Again place that CSS rule at first)Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.
use Javascript (or IE's proprietary CSS
expression()syntax) to inject an empty element, apply the gradient to it and place it behind the text.div { background: -moz-linear-gradient(top, #fff, #ddd); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */ position: relative; } div div.ie-wrap { position: relative; } div div.ie-gradient { position: absolute; top: 0; left: 0; width: 100%; height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd); }(Warning: above code is untested pile of crap. and will probably not workas is.)
Keep using the gradient hack and use Cufonto replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)
只需回退到
background-colorIE 中的普通实体，然后继续您的生活。（肯定会有地方background统治首先为它能够安全地重写/执行FF和Webkit忽略）。background-image在 IE 中使用 a 。（再次放置最初的CSS 规则）继续使用渐变 hack 并简单地“吸收”并接受 IE 的锯齿状文本。
使用 Javascript（或 IE 的专有 CSS
expression()语法）注入一个空元素，对其应用渐变并将其放在文本后面。div { background: -moz-linear-gradient(top, #fff, #ddd); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */ position: relative; } div div.ie-wrap { position: relative; } div div.ie-gradient { position: absolute; top: 0; left: 0; width: 100%; height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd); }（警告：上面的代码是未经测试的一堆废话。可能无法按原样工作。）
继续使用渐变 hack 并使用Cufon用 VML 渲染文本替换锯齿状文本。（假设您的网站使用的是允许嵌入字体的字体。）
回答by eug
You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)
您可以尝试使用 IE css 3 html 组件，例如 PIE (http://css3pie.com,) 在渲染渐变方面做得相当不错。（虽然这本质上是使用javascript）
回答by ricosrealm
Wrap the content with a DIV then add this to the DIV's css style...
用 DIV 包裹内容，然后将其添加到 DIV 的 css 样式中...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
回答by Marco
I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...
我找到了另一个便宜（有点不透明）的解决方案。当包装文本节点并将每个元素设置为相对位置时，文本再次反锯齿。不要问为什么...
Lets assume:
让我们假设：
<html>
<head>
<title>IE8 filter problem causing jagged fonts</title>
<style>
html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
position: relative;
}
.gradient {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
}
</style>
</head>
<body>
<div class="gradient">
<div>I am wrapped, therefore not jagged</div>
</div>
</body>
</html>
Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.
希望能帮助到那里的任何人。在这种情况下，没有必要使用背景图像或衍生物。
Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/
jsfiddle 中的工作示例：http: //jsfiddle.net/SLZpE/2/
回答by Rich
I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.
我有一种情况，我希望文本区域的背景是某些颜色，水平渐变为白色，并在 CSS 中由十六进制定义。我想避免制作彩色背景图像，以防我公司的非开发人员只想添加十六进制的新颜色。
The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.
我找到的解决方案是将白色渐变的 24 位 PNG 透明设置为我正在制作的区域的宽度。
I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:
然后我使用这个 IE-only hack 来让 CSS 呈现我选择的背景颜色，该颜色逐渐变为白色：
background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left;
(the hack could be improved, but it works for me, including IE9)
（hack 可以改进，但它对我有用，包括 IE9）
回答by jholster
回答by Ricardo Zea
Yes, that's a problem with IEx.
是的，这是 IEx 的问题。
Try using a solid background color:
尝试使用纯色背景：
/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc
Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.
现在，不需要使用表达“...填充重复的背景图像”，因为使用背景图像并重复它没有错，我们应该庆幸我们不仅可以这样做，而且可以在X 和 Y。
Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.
当然，你想让你的重复背景图像尽可能高效，所以让它小/薄（取决于你的设计）并使用它，请放心，你没有做错任何事情或违反任何标准或最佳实践。
