IE无法正确呈现CSS文本-background-clip

Question

My problem is in regards to IE and how it is displaying my background clipped text.

Normally (chrome/ff/etc) my code renders this:

http://i.stack.imgur.com/x9lio.png

However in IE it is rendering like this:

http://puu.sh/3kJOx.png

My code is as follows:

HTML :

<div id="centerArt">
        Hi, Visitor!
    </div>

CSS :

#centerArt{
font-family:"Arial", Arial, sans-serif;
font-weight: bold;
font-size: 100px;
line-height: 150px;
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.3);
 -webkit-background-clip: text;
 -moz-background-clip: text;
      background-clip: text;}

Is there any way to make IE behave? :)

Thanks!

Answer 1

background-clip: text is not supported in IE, valid property values are only border-box , padding-box and content-box : https://msdn.microsoft.com/en-us/library/jj127314(v=vs.85).aspx

You could try using @supports (-webkit-background-clip: text) with a fallback for other browsers.

Answer 2

IE doesnt support color: transparent value defined. Try using

font-size: 0; or add IE hack background:none\\9;