20

我正在尝试在包含一些文本的 div 中使用 CSS 渐变。使用 Gecko 和 Webkit，文本显示良好。在 IE7 和 IE8 中，文本显示为别名（锯齿状）。

我看到这个博客说：“我们决定在使用任何 DXTransform 的元素上禁用 ClearType”。

IE博客：http: //blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

那是在 2006 年。3.5 年后，我认为这个错误会被修复，但事实并非如此。有没有办法在 IE8 中做到这一点，而无需在 div 中填充重复的背景图像？

这是我的意思的一个例子。

<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>

在 IE 中，div 中的文本有别名（锯齿状），而段落中的文本则没有。

任何不涉及图像的解决方案将不胜感激。

4

7 回答 7

23

这个问题没有好的解决方案。

更糟糕的是：progid:DXImageTransform.Microsoft.gradient非常糟糕，因此鼠标事件（悬停，单击等）通过它向右传递 - 单击这样的元素也会触发对恰好位于其后面的任何元素的单独单击。谨防！

无论如何，您最好开始考虑您认为可以接受哪些后备/解决方法/NastyHacks。

以下是我的一些想法 - 按照我个人的喜好排列：

  1. 只需退回到background-colorIE 中的普通实体，然后继续您的生活。（确保首先放置该规则background，以便 FF 和 Webkit 安全地覆盖/忽略它。）

  2. background-image在 IE 中使用 a 。（再次放置最初的 CSS 规则）

  3. 继续使用渐变黑客并简单地“吸”并接受 IE 的锯齿状文本。

  4. 使用 Javascript（或 IE 的专有 CSSexpression()语法）注入一个空元素，对其应用渐变并将其放置在文本后面。

    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);
}

    （警告：上面的代码是未经测试的一堆废话。可能无法按原样工作。）

  5. 继续使用渐变 hack 并使用Cufon将锯齿状文本替换为 VML 渲染文本。（假设您的网站使用的字体允许嵌入字体。）

于 2010-04-26T00:01:31.037 回答
3

您可以尝试使用 IE css 3 html 组件，例如 PIE (http://css3pie.com ,) 它在渲染渐变方面做得相当不错。（虽然这本质上是使用 javascript）

于 2010-07-22T00:16:26.080 回答
3

用 DIV 包装内容，然后将其添加到 DIV 的 css 样式中...

position: relative;

http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html

于 2012-02-25T02:26:12.800 回答
2

我有一种情况，我希望文本区域的背景是某些颜色水平淡化为白色，并在 CSS 中由十六进制定义。我想避免制作彩色背景图像，以防我公司的非开发人员只想添加十六进制的新颜色。

我找到的解决方案是将白色渐变的 24 位 PNG 设置为透明设置为我正在制作的区域的宽度。

然后我使用这个仅限 IE 的 hack 来让 CSS 呈现我选择的背景颜色，该背景颜色逐渐变为白色：

background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;

（黑客可以改进，但它适用于我，包括 IE9）

于 2011-11-03T16:48:16.590 回答
2

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/

于 2012-10-29T10:07:05.120 回答
1

这可能算不上优雅（或有效）的解决方案，但是使用Cufón for IE 怎么样？

于 2010-03-23T22:06:29.937 回答
0

是的，这是IEx的问题。

尝试使用纯色背景色：

/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc

现在，不需要使用“...填充重复背景图像”的表达，因为使用背景图像并重复它没有任何问题，我们应该庆幸我们不仅可以这样做，而且可以重复它X 和 Y。

当然，你想让你的重复背景图像尽可能高效，所以让它变小/薄（取决于你的设计）并使用它，请放心，你没有做错任何事情或违反任何标准或最佳实践。

于 2010-04-21T20:54:41.200 回答