Использование фильтров Internet Explorer и ClearType

Я подробно рассказал о проблемах с отключением IE ClearType при использовании фильтров, и я надеюсь, что мои выводы ошибочны. Кажется, что после применения фильтра невозможно включить ClearType (например, Shadow или Alpha). Это так?

С каждым другим браузером, поддерживающим text-shadow, теперь я бы очень хотел, чтобы он мог его использовать, при необходимости отпав в IE Shadow или DropShadow. Но применение любого фильтра к тексту делает его ужасным.

Есть ли способ включить как ClearType, так и фильтры в Internet Explorer?

Некоторые источники:

ОТВЕТЫ

Ответ 1

Есть ли способ включить как ClearType, так и фильтры в Internet Explorer?

Нет. Фильтры появились до поддержки ClearType в Internet Explorer и никогда не были предназначены для работы с частичной прозрачностью. Проблема с сообщением в блоге, с которым вы связаны, никогда не была исправлена ​​и с улучшением CSS3 в последних браузерах, будущим мрачным для фильтров.

Однако есть несколько трюков, которые можно использовать для приближения text-shadow в Internet Explorer. Различные подходы включают в себя размещение копии элемента непосредственно ниже, содержащего тот же текст, но применяющий фильтры Размытие или Тень.

Метод двойной разметки, работает для IE 6-9

Предполагая, что вы применяете тень в модерации, например, к заголовку раздела или подписи к фотографии, вы можете дублировать текст на два отдельных элемента и поместить один на спину, размывая его с помощью фильтра:

<h1><span class=".shadow">Fear my shadow!</span><span>Fear my shadow</span></h1>

body { background-color: lightgreen; }
h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.shadow { display: none; } /* For non-IE browsers */
.ie > h1 > span {
    position: absolute;
    color: white;
}
.ie > h1 > span.shadow { 
    display: inline-block;
    zoom: 1;
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

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

Для IE6 вам нужно опустить селектор прямого потомка >. Однако в IE 6 это не выглядит так здорово.

Простой метод — используя :before и attr()

На сегодняшний день самый простой подход - это тот, который не требует JavaScript, но работает только в IE 8 и IE 9, потому что он полагается на функцию :before псевдокласса и CSS attr(). Тем не менее он требует нацеливания CSS на определенные версии IE.

h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.ie8and9 > h1 {
    zoom: 1; /* make element have layout */
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
.ie8and9 > h1:before {
    position: absolute;
    color: white;
    content: attr(data-innertext);
}

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

Пошаговое руководство по этому методу находится в http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/.