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

Question

我的问题是关于 IE 以及它如何显示我的背景剪辑文本。

通常(chrome/ff/etc)我的代码呈现这个:

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

然而在 IE 中它是这样呈现的:

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

我的代码如下:

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;}

有什么方法可以让 IE 正常运行吗？ :)

谢谢!

Answer 1

background-clip: text 在 IE 中不支持，有效的属性值只有 border-box, padding-box 和 内容框:https://msdn.microsoft.com/en-us/library/jj127314(v=vs.85).aspx

您可以尝试将 @supports (-webkit-background-clip: text) 与其他浏览器的后备一起使用。