Тень текста для IE

Question

Я создаю веб-сайт и использую функцию text-shadow, однако она не работает для IE.

Графика:

text-shadow: 0.1em 0.1em 0.2em black;

Есть ли какое-либо решение или взлом, чтобы преодолеть это, или что-то, что имитирует функцию text-shadow для IE.

Answer 1

Для некоторых версий IE фильтр Dropshadow может делать то, что вам нужно:

http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx

Answer 2

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

Этокомбинация использования CSS3 text-shadow, , которая имеет хорошую поддержку, кроме IE , затем использование комбинации фильтров для IE.Поддержка текстовых штрихов CSS3 на данный момент плохая.

IE Фильтры:

Фильтр свечения выглядит ужасно , поэтому я не использовалчто.

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

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

Собираем все вместе

Этот пример будет черным текстом с белым штрихом.Я использую условные HTML-классы, например, для целевой IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#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;
}

Answer 3

Я уже некоторое время ищу и исследую эту проблему и хотел бы поделиться, возможно, противоречивым выводом при тестировании моего сайта на IE10.

У меня есть эта структура HTML:

<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p>

в сочетании с CSS:

p { display: inline-table;
    color: #FFF;
    text-shadow: 0px 1px 2px #111, 0px 1px 0px #111;
    margin: 0px 20px; }

a.links {
    text-decoration: underline;
    color: #FFFF60;
    font-size: 1.1em; }

Если я посмотрю на результат этого в IE10, акорный текст "ledenpagina" действительно получит стиль тени текста, как определено в родительском элементе (тег p). Предположение, что это может иметь какое-либо отношение к комбинированному оформлению текста: селектор подчеркивания был ложным (проверено, применяя оформление текста также к тегу p)

Результат можно увидеть здесь: http://tczelem.be (сдвиньте вниз вкладку ползунка заголовка)

Таким образом, селектор оформления текста, похоже, имеет некоторый эффект в IE10.

! [Введите описание изображения здесь] [2]

Answer 4

Класс фильтра IE также накладывает тень на любые фоновые изображения, которые у вас есть.Например, у меня есть тег H1, у которого есть линия как часть фона, когда я помещаю фильтр тени текста IE, линия на фоне наследует эту тень.