Имитация обводки текста в Internet Explorer

Question

Все браузеры, за исключением Internet Explorer (по-видимому, даже бета-версия IE9), поддерживают text-shadowи, кроме того, браузеры webkit, кажется, понимают -webkit-text-stroke, Но как эмулировать обводку текста в Internet Explorer? Я посмотрел на доступные фильтры, и мне кажется, что ни один из них не может быть использован для имитации этого, кроме, возможно, Glow, но он создает размытое свечение, а не сплошной контур.

Есть ли способ достичь этого с помощью фильтров CSS / и / или Microsoft / поведения и / или JavaScript?

Мне не нужно решение для работы в старых версиях IE, мой макет не будет оптимизирован для IE7 или более ранних версий.

Answer 1

Здесь есть то, что я откопал некоторое время назад: http://jsfiddle.net/kovalchik/yJff9/

Я не могу проверить, работает ли он на самом деле или нет, так как сейчас я использую Mac. Это выглядит как грязный взлом. Но стоит попробовать:P

Answer 2

Я искал кросс-браузерное решение для обработки текста, которое работает, когда накладывается на фоновые изображения. Думаю, у меня есть решение для этого, которое не требует дополнительной разметки, js и работает в IE7-9 (я не тестировал 6), и не вызывает проблем с наложением.

Это комбинация использования CSS3 text-shadow, которая имеет хорошую поддержку, кроме IE (http://caniuse.com/#search=text-shadow), с последующим использованием комбинации фильтров для IE. Поддержка текстовых штрихов CSS3 на данный момент слаба.

IE Фильтры

Светящийся фильтр (http://www.impressivewebs.com/css3-text-shadow-ie/) выглядит ужасно, поэтому я этим не пользовался.

Ответ Дэвида Хьюитта заключался в добавлении фильтров в виде теней в комбинации направлений. К сожалению, ClearType удаляется, поэтому мы получаем плохо псевдоним.

Затем я объединил некоторые элементы, предложенные на useragentman, с фильтрами drophadow.

Положить его вместе

Этот пример будет черным текстом с белым штрихом. Я использую условные HTML-классы по пути к IE.

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}