Градиенты CSS в IE7 и IE8 приводят к тому, что текст становится псевдонимом

Я пытаюсь использовать градиент CSS в div, содержащий некоторый текст. С помощью Gecko и Webkit текст отображается хорошо. В IE7 и IE8 текст появляется с псевдонимом (jaggy).

Я столкнулся с этим блоком: "Мы решили отключить ClearType для элементов, которые используют любой DXTransform".

Блог 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 является псевдонимом (jaggy), а текст в параграфе - нет.

Приветствуется любое решение, которое не связано с изображениями.

Ответ 1

Нет хорошего решения этой проблемы.

Хуже еще: progid:DXImageTransform.Microsoft.gradient ужасно глючит, поэтому мышиные события (наведите указатель мыши, щелчок и т.д.) проходят через него - щелчок по такому элементу также вызывает отдельный щелчок по тому элементу, который находится за ним. Осторожно!

Независимо от того, вам лучше начать рассмотрение того, какие резервные/обходные пути /NastyHacks считаются вам приемлемыми.

Вот несколько идей с моей точки зрения - в порядке моих личных предпочтений:

Просто вернитесь к равному сплошному телу background-color в IE и продолжайте свою жизнь. (Обязательно поместите правило background, чтобы оно было безопасно переопределено/проигнорировано FF и Webkit.)
Используйте background-image в IE. (Снова поместите правило CSS сначала)
Продолжайте использовать градиентный взлом и просто "сосать его" и принять неровный текст для IE.

используйте Javascript (или проприетарный синтаксис CSS 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);
}

(Предупреждение: выше код является непроверенной кучей дерьма и, вероятно, не будет работать как есть.)

Продолжайте использовать градиентный взлом и используйте Cufon, чтобы заменить неровный текст визуализированным текстом VML. (Опираясь на предположение, что ваш сайт использует шрифт, который позволяет встраивать шрифты.)

Ответ 2

Вы можете попробовать использовать компонент IE css 3 html, например PIE ( http://css3pie.com), что делает довольно приличную работу по рендерингу градиентов. (Хотя это по существу используется javascript)

Ответ 3

Оберните содержимое с помощью DIV, затем добавьте его в стиль DIV css...

position: relative;

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

Ответ 4

У меня была ситуация, когда мне хотелось, чтобы фон текстовых областей был определенным цветом, затухающим горизонтально до белого и определяемым шестнадцатеричным в CSS. Я хотел избежать создания цветных фоновых изображений в случае, если член, не являющийся разработчиком моей компании, хотел добавить новый цвет только с шестнадцатеричным.

Решение, которое я нашел, состояло в том, чтобы сделать 24-битный PNG белого градиента прозрачным, установленным в ширину области, которую я делал.

Затем я использовал этот IE-only hack, чтобы заставить CSS отображать цвет фона по моему выбору, который исчезает до белого:

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

(взлома может быть улучшена, но он работает для меня, включая IE9)

Ответ 5

Я нашел еще одно недорогое (немного непрозрачное) решение. Текст становится антиализованным снова, при обертке текста node и установке каждого элемента в относительное положение. Не спрашивайте, почему...

Предположим, что

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

Надеюсь, что кто-нибудь поможет. В этом случае нет необходимости использовать фоновые изображения или производные.

Рабочий пример в jsfiddle: http://jsfiddle.net/SLZpE/2/

Ответ 6

Это может не считаться элегантным (или рабочим) решением, но как насчет использования Cufón для IE?

Ответ 7

Да, это проблема с IEx.

Попробуйте использовать сплошной цвет фона:

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

Теперь не нужно использовать выражение "... набирая повторяющееся фоновое изображение", так как нет ничего плохого в использовании фонового изображения и повторять его, мы должны быть благодарны за то, что мы можем не только это сделать, но мы можем повторите его в X и Y.

Конечно, вы хотите сделать свое повторяющееся фоновое изображение максимально эффективным, так что сделайте его маленьким/тонким (в зависимости от вашего дизайна) и используйте его, будьте уверены, вы не делаете ничего плохого или против каких-либо стандартов или лучших практика.