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

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

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

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

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


filter internet-explorer cleartype
person Alex Dunae    schedule 02.03.2011    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Есть ли способ включить и 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/.

person Andy E    schedule 19.05.2011
comment
Какой отличный ответ - примеры кода, умное исправление и все такое. Спасибо, что нашли время собрать это воедино. Хотел бы я проголосовать дважды! - person Alex Dunae; 20.05.2011