0

I am using the following CSS:

-webkit-text-stroke: 0.04em; white; -webkit-text-fill-color: white; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);

-webkit-text-stroke: 0.04em; white; works well in Firefox, Safari, and Chrome. But it's not compatible with Explorer. How can I make it work in Explorer too?

Eddy
  • 566
  • 2
  • 8
  • 28
  • Possible duplicate of [Simulating text-stroke in Internet Explorer](http://stackoverflow.com/questions/4567677/simulating-text-stroke-in-internet-explorer) – Nicholas Mar 23 '17 at 21:42
  • As I am using **-webkit-text-stroke** to fatten the letters, and **text-shadow** to create a darker area around the text (for clarity of the letters when placed over a photo) it only leave two others, but these don't work in Safari. – Eddy Mar 23 '17 at 21:59

1 Answers1

0

It's not natively supported in IE, here's the CanIUse browser support table. It also has poor support in Edge. However, you can use a filter to achieve the same effect.

Here is a link to a fiddle of it working. Credit to the author of the answer where it is due as well.

An example of the CSS required...

.myClass {
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)";
}
Community
  • 1
  • 1
  • As I am using **-webkit-text-stroke** to fatten the letters, and **text-shadow** to create a darker area around the text (for clarity of the letters when placed over a photo) it only leave two others, but these don't work in Safari. – Eddy Mar 23 '17 at 21:59
  • **-webkit-text-stroke** should work in Safari as long as it has the prefix. –  Mar 23 '17 at 22:03
  • **-webkit-text-stroke** works in Safari but not in IE – Eddy Mar 23 '17 at 22:13
  • Yes, but have you tried using the -ms-filter example above? –  Mar 23 '17 at 22:14
  • **-ms-filter** is not working for Safari. I have to check later if it works for IE. So if it does, I'll need **-ms-filter** and **-webkit-text-stroke** both for Safari and IE I guess (?) – Eddy Mar 23 '17 at 22:20
  • "Glow, but it creates a blurry glow, not a solid outline." – Eddy Mar 23 '17 at 22:21