Text Shadow in IE 11 not working

问题

The text in this example of text-shadow doesn't display in IE 11, but does in FF & Chrome.

http://codepen.io/maxnguyen/pen/

According to caniuse.com IE has had full support for text-shadow since IE 10. Is there a way to alter the CSS so it would work in IE11?

<div id="box">
  <p id="flashlight">
    <span id="flash">MAX</span>
    <span id="light">NGUYEN</span>
  </p>
</div>

CSS:

html {
  overflow: hidden; /*FF fix*/
  height: 100%;
  font-family: Geneva, sans-serif;
  background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%));
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}

p {
    margin: 0;
}


/* box ------------------------------------------------------ */

#box {
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  -webkit-backface-visibility: hidden; /* fixes flashing */
}


/* flashlight ------------------------------------------------------ */

#flashlight {
  color: hsla(0,0%,0%,0);
  perspective: 80px;
  outline: none;
}


/* flash ------------------------------------------------------ */

#flash {
  display: inline-block;
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}

#box:hover #flash {
   text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
  margin-left: 20px;
  transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
}


/* light ------------------------------------------------------ */

#light {
  display: inline-block;
  text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
}

#box:hover #light {
  text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
  transform: rotateY(-60deg);
  transition:         transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
}

回答1:

This happens because IE wants you to have a base color on the text. You also use text-shadow to define the base color.

You can change this so you also define the color property.

#flash {
  display: inline-block;
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}

Changes to

#flash {
  display: inline-block;
  color: #bbb;
  text-shadow: #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}

Where your first text-shadow is now assigned to the color property.

Why does this happen?

Well i'm not certain if this happend in the previous versions of IE. However as you can see at the MS text-shadow generator there is a property that is not supported by chrome and FF; spread distance. This might suggest that IE does not use the same methods as chrome and FF do.
However it seems logic to give a base color before give a shadow to something.

Addition notes

I suggest to also let -webkit- support everything. For example transition in chrome is only supported by -webkit-transition.

jsFiddle

回答2:

this a very tricky issue where you probabilly could not find any answer, if you open a simple html files to ie10 or ie11 this will show all your text-shadow but you intrigated apps does not support the text-shadow even it shows some error means red line under the text-shadow text.

You just need to change the meta tags for this...use these

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // ie supports
<meta name="viewport" content="width=device-width, initial-scale=1">// for responsive

来源：https://stackoverflow.com/questions/19803062/text-shadow-in-ie-11-not-working