html - IE 无法正确呈现 CSS 文本 - 背景剪辑

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: textIE 不支持，有效的属性值只有border-box,padding-box和content-box: https://msdn.microsoft.com/en-us/library/jj127314(v=vs.85).aspx

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

Answer 2

IE 不支持color: transparent定义的值。尝试使用

font-size: 0;或添加 IE hackbackground:none\9;