52

css3text-shadowを IE9 で動作させる簡単な方法はありますか? 少なくとも 1 つのテキスト シャドウは素晴らしいでしょう。理想的にはIE8もサポートされていると思います。要素の text-shadow css プロパティを見て、それを IE9 用に実装する単純な jquery プラグインまたは .htc ファイルがあることを願っています。

4

6 に答える 6

61

はい、しかしあなたが想像する方法ではありません。caniuse (非常に優れたリソース) によると、IE9 にサポートを追加するためのサポートもポリフィルもありませんtext-shadow。ただし、IE には独自のテキスト シャドウがあります (詳細はこちら)。

Web サイトから取得した実装例 (IE5.5 から IE9 で動作):

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

ブラウザー間の互換性とコードの将来性を確保するために、CSS3 標準text-shadowプロパティ (詳細はこちら) も使用することを忘れないでください。これは、IE10 が従来の dx フィルターのサポートを廃止する意図を公式に発表したことを考えると、特に重要です。今後、IE10+ は CSS3 標準のみをサポートしますtext-shadow。

于 2011-08-01T23:35:43.803 に答える
26

IE9 は CSS3 をサポートしていないためtext-shadow、代わりに IE の filter プロパティを使用します。実際の例: http://jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

で置き換えることができます

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

非常によく似た結果を得ることができます。

于 2011-08-01T23:42:17.547 に答える
13

CSS ジェネレーターを試してください。

値を選択して、オンラインで結果を確認できます。次に、クリップボードにコードを取得します。
これは、生成されたコードの一例です。

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
于 2012-12-06T12:00:20.953 に答える
5

背景画像に重ねると機能するクロスブラウザのテキストストロークソリューションを探していました。余分なマークアップやjsを必要とせず、IE7-9で動作し（6はテストしていません）、エイリアシングの問題を引き起こさない、これに対する解決策があると思います。

これは、IE（ http://caniuse.com/#search=text-shadow ）を除いて優れたサポートを提供するCSS3 text-shadowを使用してから、IE用のフィルターを組み合わせて使用​​することの組み合わせです。CSS3のテキストストロークのサポートは現時点では不十分です。

IEフィルター

グローフィルター（http://www.impressivewebs.com/css3-text-shadow-ie/）はひどいように見えるので、私はそれを使用しませんでした。

David Hewittの答えは、方向の組み合わせにドロップシャドウフィルターを追加することでした。残念ながら、ClearTypeは削除されるため、エイリアスが正しくないテキストになってしまいます。

次に、 useragentmanで提案された要素のいくつかをドロップシャドウフィルターと組み合わせました。

それを一緒に入れて

この例は、白いストロークの黒いテキストになります。ちなみに、IEをターゲットにするために条件付きHTMLクラスを使用しています（http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-nether/）。

#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;
}
于 2012-07-18T09:52:11.787 に答える
1

上記のフィルターを試してみましたが、その効果が非常に気に入りませんでした。また、このような基本的な効果のように見えるものの読み込み時間が遅くなるため、プラグインを使用したくありませんでした。

私の場合、ぼかしが 0px のテキスト シャドウを探していました。つまり、シャドウはテキストの正確なレプリカですが、オフセットして後ろにあるだけです。この効果は jquery で簡単に再現できます。

<script>
    var shadowText = $(".ie9 .normalText").html();  
    $(".ie9 .normalText").before('<div class="shadow">' + shadowText + '</div>');
</script>
<style>
    .ie9 .shadow { position: relative; top: 2px; left: -3px; }
</style>

これにより、以下の css3 text-shadow と同じ効果が作成されます。

    text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);

これが実際の例です (メインのバナー画像の上にある大きな白いテキストを参照してください) http://www.cb.restaurantconnectinc.com/

于 2012-11-15T20:25:43.240 に答える
0

crdunstの答えはかなりきちんとしていて、私が見つけた中で最も見栄えの良い答えですが、使用方法についての説明はなく、コードは必要以上に大きくなっています。

必要な唯一のコード:

#element {
    background-color: #cacbcf;
    text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
    filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}

最初に- を指定する必要background-colorがあります - 要素を透明にする必要がある場合は、親の背景色をコピーするか、継承させます。クロマフィルターの色は、テキストの周りのアーティファクトを修正するために背景色と一致する必要があります (ただし、ここでは色をコピーする必要があり、書き込みはできませんinherit)。dropshadow-filterを短くしていないことに注意してください- 機能しますが、影は要素の寸法にカットされます (大きな影で目立ちます; オフセットを少なくとも 4 に設定してみてください)。

ヒント:透明度のある色 (アルファ チャネル) を使用する場合は、#AARRGGBB 表記で記述します。ここで、AA は不透明度の 16 進数の値を表します (01 から FE まで)。役に立たない.. ^^ 影が柔らかくなく、同じアルファ値でも暗く見えるため、rgba 表記よりも少し低くしてください。;)

IE のアルファ値を変換する素敵なスニペット (JavaScript、コンソールに貼り付けるだけ):

var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);

問題:影が適用された後、テキスト/フォントは画像のように動作します。ズームインすると、ピクセル化されてぼやけます...しかし、それはIEの問題であり、私の問題ではありません。

シャドウのライブ デモ: http://jsfiddle.net/12khvfru/2/

于 2015-07-28T20:54:59.207 に答える