Моделирование текстового штриха в Internet Explorer

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

Есть ли способ достичь этого, используя CSS и/или фильтры Microsoft/поведение и/или JavaScript?

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

Ответ 1

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

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

Ответ 2

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

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

Фильтры IE

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

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

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

Совмещение

В этом примере будет черный текст с белым штрихом. Я использую условные классы 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;
}