Search code examples
internet-explorershadowdropshadowcss

Why the MS filters (dropShadow, glow or shadow) doesn't work for <span> tags in IE?

I just want to apply text shadow to <span> elements in Internet Explorer 6-9. I'm using the following CSS code.

.dropShadow { filter: dropshadow(color=#ffff00,offX=5,offY=5); }
.glow       { filter: glow(color=#ff0000); }
.shadow     { filter: shadow(color=#00ff00); }

With this HTML:

<span class="dropShadow">span with dropShadow</span>
<p class="dropShadow">paragraph dropShadow</p>
<span class="glow">span with glow</span>
<p class="glow">paragraph with glow</p>
<span class="shadow">span with shadow</span>
<p class="shadow">paragraph with shadow</p>

The result is that only <p> elements will receive the dropShadow, glow and shadow styles. But <span> will not get styles applied. Why?

There is a live example (jsfiddle). I have used IE9.

Solution

  • You could add display:inline-block to your spans.

    http://jsbin.com/ipiqak/edit#preview