Текстовая тень: IE8

Хорошо, поэтому я пытаюсь реализовать 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>

Ответ 1

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

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

Ответ 2

Я попробовал Модернизатор (также с heygrady polyfill). Я попробовал 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 dropshadow не имеет размытия. Я могу жить с этим.

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 the important part */
}