web-dev-qa-db-ja.com

テキスト-シャドウ：IE8

了解しました。さまざまなブラウザにtext-shadowを実装しようとしています。 IE6、IE7、FF、Chrome、およびOperaはすべて機能しています...しかし、IE8は、[互換表示]にない限り、影を表示しません。

検索/グーグルでいくつかの「解決策」を見てきましたが、影はまだ「互換表示」にしか表示されていません。

モードを変更せずに表示する方法についてのアイデアはありますか？

注： HTML5ボイラープレートとModernizrを使用します。

編集：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>
htmlcssinternet-explorer-8ie8-compatibility-mode
11
David Bradbury

Webサイトは、必ずしもすべてのブラウザで同じように見える必要はありません。さらに、MSフィルターはがらくたです。 Modernizer を使用することをお勧めします。IE8に別のソリューションを適用します。

それは頭痛からあなたを救うでしょう:)

3
Maverick

Modernizer （ heygrady's 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ドロップシャドウにはぼかしが付いていません。私はそれと一緒に暮らすことができます。

_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 */
}
_
11
leymannx