Question

将color: rgba(255,255,255,0.0);与text-shadow: 0px 0px 2px rgba(255,255,255,1);结合使用时，Internet Explorer似乎会从文本本身继承文本阴影的透明度，导致阴影根本不显示。

JSFiddle示例（在IE中查看）： http://jsfiddle.net/495dZ/1/

是否有一种聪明的伪类技术可以解决这个问题？或者也许使用jQuery来实现类似的效果？

Answer 1

您可以隐藏窗口/屏幕边缘的文本，考虑为旧版本的IE添加回退。

<强> Working Example

.black-box {
    background: url(http://i44.tinypic.com/2rzwis3.jpg) no-repeat;
    padding: 20px;
}
span.shadow {
    font: 20px Arial;
    position: absolute;
    left:-100px;
    top:-100px;
    color: rgba(0, 0, 0, 1);
    text-shadow: 120px 120px 2px rgba(255, 255, 255, 1);
}

<!--[if lte IE 9]>
    <style>
    span.shadow {
        position: static;
        display:inline-block;
        font: 20px Arial;
        color: rgba(255, 255, 255, 1);
        filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=2.25);
        }
    </style>
<![endif]-->

<div class="black-box"> 
    <span class="shadow">This is some text.</span>
</div>

Answer 2

您可以通过将真实文本移出可视区域来欺骗IE，并调整文本阴影以补偿实际文本偏移。

这是一个演示 - http://jsfiddle.net/495dZ/36/

基本校长：

.shadow { 
    display:inline-block;
    color:#FFF; // the color will control the text-shadow color
    text-indent:-999px; // offsetting the "real" text
    text-shadow:999px 1px 3px; // fixing the offset of the text shadow
}

这将在某些情况下有效，并且需要针对每种情况进行独特设置。（最有可能将父级的溢出设置为hidden，因此不会看到偏移文本。有时您需要将其偏移到不同的方向，具体取决于上下文）

Answer 3

IE 10+的额外text-shadow定义可以解决问题：

.transparent-text-with-shadow {

    color:         transparent;                            // or rgba(0,0,0,0);
    text-shadow:   rgba(0,0,0,1) 0px 0px 10px;             // for Chrome etc.
    text-shadow:   rgba(0,0,0,1) 0px 0px 10px 0.01em;      // for IE 10+
}

第二个text-shadow定义仅覆盖IE 10+中的第一个，因为IE 10+支持阴影“传播”的第四个长度值 - 请参阅http://caniuse.com/#search=text-shadow

在Chrome等其他浏览器中，第二个text-shadow定义覆盖失败，因为它们不支持阴影的第四个长度值，因此它们将使用第一个text-shadow定义。

（确保第四个“展开”值非常小 - 因此您无法看到任何渲染差异。）

Answer 4

我不是100％确定这是否是您要求的，但IE9及以下版本不支持text-shadow属性。在IE10和IE11中，您的小提琴看起来与最新的Chrome相同。

我建议使用条件来定位IE9 / IE8 / IE7并提供纯文本。

在IE中的文本阴影的透明文本

4 个答案: