Я искал кросс-браузерное решение для обработки текста, которое работает при наложении на фоновые изображения. Мне кажется, у меня есть решение для этого, которое не требует дополнительной разметки, 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-классы, например, target 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;
}