Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

css - 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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...