0

Для ссылки в меню задан text-shadow

div.content .l-side .l-menu li a {
    color: #24508a;
    display: block;
    font-size: 14px;
    line-height: 38px;
    padding: 0px 8px;
    text-align: center;
    text-shadow: 0px 0px 1px #fffa68, 1px 1px 1px #fffa68, -1px -1px 1px #fffa68;
}

для ие7 прописываю в таблице стилей

div.content .l-side .l-menu li a {
    filter: progid: DXImageTransform.Microsoft.Shadow(Color=#fffa68, Direction=45, Strength=4);
}

Но тень в ие7 не отображается. Что тут неправильно?

5
  • 1
    Стандартный вопрос: вы уверены, что вам нужно поддерживать IE7. Если да, то вы уверенны, что сайт в IE7 должен выглядеть точно так же как в топовых браузерах? Я в последнее время прихожу к обратному. Каждому браузеру по возможности. Не умеет IE7 тени, так и оставьте его в покое. Все равно те полтора бедолаги никогда не узнают что там должны быть тени. Да и в любом случае, они их не оценят по достоинству. А фильтрами и прочими затычками вы их, наверняка и без того слабым машинам работы поддадите.
    – Cypher
    5 окт 2012 в 16:51
  • А если по существу, то я не раз сталкивался с тем, что фильтры и анлогичные им костыли от чего только и не перестают работать. Я рекомендую вам создать новый html документ, создать одну только надпись в одном спане и доводить ее до ума пока не заработает. Потом учложнять до состояния вашег опроекта и искать причину.
    – Cypher
    5 окт 2012 в 16:53
  • Или попробовать альтернативы: htc-затычки типа pie.htc. Вроде было для теней. И сейчас в голову пришел вариант попробовать сделать копию текста меню цветом тени и подложить под настоящий текст меню со смещением на пиксель в нужную вам сторону.
    – Cypher
    5 окт 2012 в 16:55
  • хотелось бы тени в ие7 все-таки сделать. теней нет и в ие8, а если использовать код div.content .l-side .l-menu li a { -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color=#FFFA68, Direction=45, Strength=1)"; filter:progid:DXImageTransform.Microsoft.Shadow(Color=#FFFA68, Direction=45, Strength=1); то в ие8 отвратительно выглядит шрифт.
    – Heidel
    5 окт 2012 в 16:56
  • Да, с тем, что отвратительно выглядит то же сталкивался. Так и бросал. Попробуйте поковыряйте в сторону pie.htc или вот, с дублированием текста пример: jsfiddle.net/m32Uv - на первый взгляд классно получилось :).
    – Cypher
    5 окт 2012 в 17:01

2 ответа 2

1

Не дает мне хэшкод, почему-то больше редактировать мои сообщения комментарии и писать новые :).

По мимо стандартных решений типа фильтров и им подобных, предлагаю попробовать дублировать текст. Собственно демо.

При помощи modernizr можно определить, умеет ли браузер пользователя свойство text-shadow или нет. В качестве ответа вы получите класс textshadow или no-textshadow у html тега (в моем премере я эти классы проставил тегу ul). И далее, в зависимости от ситуации использовать CSS3-тень или вот этот мой костыль с дублированием.

Решение особо не тестировал. Предлагаю на вскидку :).

Границы применения пока не ясны, но вполне возможно, что в какой-нибудь ситуации (в случае с однопиксельной тенью, например), решение подходит и работает уж точно лучше filter-костылей.

HTML, конечно, получается отвратительный :). Но все опять же зависит от ситуации. Как вариант, заморочиться и написать JS-ку дублирующую текст :).

4
  • Я сейчас пробую подключить PIE.htc, со скругленными уголками он меня выручал, но с тенями почему-то вообще не срабатывает. Стили у меня лежат в папке в начало/css/style.css, PIE.htc в в начало/patches/PIE.htc, подключаю его div.content .l-side .l-menu li a { text-shadow: 0 0 1px #fffa68, 1px 1px 1px #fffa68, -1px -1px 1px #fffa68; text-shadow: 0 0 1px #fffa68, 0px 2px 1px #fffa68, 2px 0px 1px #fffa68, 0px -2px 1px #fffa68, -2px 0px 1px #fffa68, 0px 1px 1px #fffa68, 1px 0px 1px #fffa68, 0px -1px 1px #fffa68, -1px 0px 1px #fffa68; behavior: url(../patches/PIE.htc);} я что-то не так делаю?
    – Heidel
    5 окт 2012 в 17:22
  • Да вроде все верно. Если не уверены в путях, положите рядом с CSS-файлом и тогда уж точно не запутаетесь: behavior: url(PIE.htc). Я так до конца и не разобрался, когда эта штука работает, а когда нет. Иногда это зависит от глубины вложенности тегов или слоя под тем, что чиним. Иногда это конфликт с другими костылями: фильтром, например. В таком случае, как я уже говорил, пробуйте новый html-документ и в нем, без лишниго пробуйте запустить. Или, если сайт пирога отдает вам демо страницу, то берите ее за основу и из нее выводите что-то близкое к вашему сайту. Так и найдете конфликт.
    – Cypher
    5 окт 2012 в 17:27
  • класть в одну папку со стилями была попытка, все равно реакции ноль. смотрю свойства страницы через Инструмент разработчика в хроме, рядом с behavior: url(../patches/PIE.htc); он выдает значок предупреждения и всплывающую подсказку Unknown property name. то есть, он не подключился?
    – Heidel
    5 окт 2012 в 17:32
  • Да подключился. Просто инструмент этот не знает свойства behavior.
    – Cypher
    5 окт 2012 в 17:33
0

Для некоторых версий IE DropShadow Filter сделает то что вам нужно:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.