CSS-градиенты в IE7 и IE8 приводят к тому, что текст становится псевдонимом - PullRequest
Новая
       30

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

20 голосов
/ 24 марта 2010

Я пытаюсь использовать 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), а текст в абзаце - нет.

Будем весьма благодарны за любые решения, не связанные с изображениями.

Ответы [ 7 ]

23 голосов
/ 26 апреля 2010

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

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

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

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

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

  2. Используйте background-image в IE. (Снова поместите это правило CSS в first )

  3. Продолжайте использовать хакерский градиент, просто "смиритесь с этим" и примите зазубренный текст для IE.

  4. используйте Javascript (или собственный синтаксис CSS expression() в IE), чтобы вставить пустой элемент, применить к нему градиент и поместить его за текстом. 

    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. Продолжайте использовать взлом градиента и используйте Cufon , чтобы заменить зазубренный текст на визуализированный VML-текст. (Предполагается, что на вашем сайте используется гарнитура, которая позволяет встраивать шрифты.)

3 голосов
/ 25 февраля 2012

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

position: relative;

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

3 голосов
/ 22 июля 2010

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

2 голосов
/ 29 октября 2012

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

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

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

2 голосов
/ 03 ноября 2011

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

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

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

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

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

1 голос
/ 24 марта 2010

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

0 голосов
/ 22 апреля 2010

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

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

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

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

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

...