Градиенты CSS в IE7 & IE8 заставляют текст становиться искаженным

Question

Градиенты CSS в IE7 & IE8 заставляют текст становиться искаженным

Я пытаюсь использовать градиент CSS в отделении, содержащем некоторый текст. С Гекконом и WebKit, текстовыми прекрасными дисплеями. В IE7 и IE8 текст кажется искаженным (неровность).

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

Блог IE: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

Это вернулось в 2006; 3.5 года спустя я предполагаю, что эта ошибка была бы исправлена, но это не. Существует ли способ сделать это в IE8, не обращаясь к наполнению повторяющегося фонового изображения в отделении?

Вот пример того, что я имею в виду.



Hello World
Normal text

В IE текст в отделении искажается (неровность), и текст в абзаце не.

Любое решение, которое не включает изображения, значительно ценилось бы.

20

css text internet-explorer gradient

задан Cory 23 March 2010 в 21:56

4 ответа

Другие вопросы по тегам:

css text internet-explorer gradient

Похожие вопросы:

score 1 · Answer 1

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

1

ответ дан 30 November 2019 в 00:19

score 0 · Answer 2

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

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

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

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

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

score 23 · Answer 3

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

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

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

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

Просто вернитесь к простому сплошному фоновому цвету в IE и продолжайте жить своей жизнью. . (Обязательно поместите это фоновое правило первое , чтобы оно могло быть безопасно переопределено / проигнорировано FF и Webkit.)
Используйте фоновое изображение в IE. (Снова поместите это правило CSS в сначала )
Продолжайте использовать градиентный хакер, просто «впитайте его» и примите неровный текст для 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)); 
поведение: выражение (jQuery (this) .wrapInner (''). prepend (' '); this.runtimeStyle.behaviour =' none '); / * отключить повторные прогоны * / 
position: relative; 
} 
div div.ie-wrap {
position: relative; 
} { {1}} div div.ie-gradient {
position: absolute; 
top: 0; 
left: 0; 
width: 100%; {{ 1}} height: expression (this.runtimeStyle.height = this.parentNode.clientHeight + "px"); 
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ffffffff, endColorstr = # ffdddddd); { {1}}}

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

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

score 3 · Answer 4

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