Текст-тень: IE8 - PullRequest
Новая
       36

Текст-тень: IE8

11 голосов
/ 22 апреля 2011

Хорошо, поэтому я пытаюсь реализовать text-shadow в различных браузерах.У меня работают IE6, IE7, FF, Chrome и Opera ... но IE8 не будет показывать тени, если только он не находится в режиме просмотра совместимости.

Я рассмотрел несколько «решений»через поиск / Google, но тень все еще появляется только в «представлении совместимости».

Есть идеи, как заставить его отображаться без изменения режимов?

Примечание: Использование HTML5 Boilerplate и Modernizr.

edit: Добавлено, что я использую Modernizr, и я нажал не ту кнопку в моем тестере.Это не работает в IE9, но я не думаю, что это связано.

CSS: 

#links li a {
font-size: 24px;
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530');
filter:DropShadow(Color=#102530, OffX=0, OffY=3);
zoom: 1;
}

HTML 

<ul id="links">
    <li><a href="#"/>Text</a></li>
</ul>

Ответы [ 2 ]

11 голосов
/ 05 марта 2014

Я попробовал Модернизатор (также с polyfill heygrady). Я попробовал cssSandpaper . Я попробовал CSS3PIE . Но никто из них не отображал текстовую тень в Internet Explorer 8 (CSS3PIE не поддерживает text-shadow). Я также попробовал метод двойной разметки . Но это действительно не может быть.

А потом я нашел сообщение в блоге Whykiki и просто добавил filter: dropshadow(color=#000000, offx=2, offy=2); в сочетании с display: block;. И это все. Некоторые из вас могут попробовать zoom: 1; вместо display: block;, чтобы активировать его. filter: glow(color=#000000,strength=2); тоже работает. Как вы увидите, MS Shadowsadow не идет с размытостью. Я могу жить с этим. 

h1 {
  color: #fce934;
  text-shadow: 2px 2px 2px #000000;
  -moz-text-shadow: 2px 2px 2px #000000;
  -webkit-text-shadow: 2px 2px 2px #000000;
  filter: dropshadow(color=#000000, offx=2, offy=2);
  display: block; /* that's the important part */
}
3 голосов
/ 22 апреля 2011

Веб-сайт не обязательно должен выглядеть одинаково в каждом браузере.Плюс фильтры MS это хрень.Я бы порекомендовал использовать Модернизатор и применить другое решение для IE8.

Это избавит вас от головной боли:)

...