Использование фильтров Internet Explorer и ClearType - PullRequest
Новая
       45

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

11 голосов
/ 02 марта 2011

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

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

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

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

1 Ответ

11 голосов
/ 19 мая 2011

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

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

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

Метод двойной разметки, работает для 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 это выглядит не очень хорошо. <Ч />

Простой метод & mdash; используя :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/.

...