IE10中没有文字阴影

时间:2013-05-12 13:29:57

标签: css internet-explorer-10 css3

我有一个应用了文本阴影的菜单,因此它会模糊链接。它按预期工作,除了在IE10中它完全隐藏链接。 只有当悬停在链接上时才会显示它们,因为在悬停时会删除text-shadow。

以下是应用代码:

text-shadow: 0px 0px 3px #fff;

此外,这里是链接...菜单位于屏幕的左下角。 http://madebym.net/test/ractiv/index.html

4 个答案:

答案 0 :(得分:3)

这个问题有几个可能的原因。

  1. IE不显示与大多数显示器相同的文本阴影:由于某种原因,IE阴影更不透明。然后你必须检查浏览器。

    IE< = 9:

    filter:progid:DXImageTransform.Microsoft.DropShadow(color=#000000, offX=1, offY=1);
    

    (详情:http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx
    (似乎还有一个名为“模糊”的过滤器可能更符合您的需求。页面上会提到它。)

    IE 10 +:

    text-shadow: 0px 0px 3px rgba(100%,100%,100%,0.8);
    

    (略微透明的阴影来抵消IE的阴影不透明度。你还可以减小阴影的大小,看看它的作用。)

    其他浏览器:

    text-shadow: 0px 0px 3px #fff;
    

    (您的正常代码。)

  2. 原因还可能是您使用IE过滤器为以前的IE版本制作了阴影,但是忘了不将其应用于支持正常阴影的IE 10,导致两个效果堆叠。

  3. 听起来不太可能,但可能会出现影响此问题的默认值差异。你使用CSS重置吗?

答案 1 :(得分:0)

使用此text-shadow: 0px 0px 3px 1px rgba(255,255,255,0.5)

答案 2 :(得分:0)

它适用于IE10,您可以打开开发人员工具(F12)并确保渲染和文档模式设置为IE10和IE10标准模式吗?

答案 3 :(得分:0)

dstoreyMark已经指出了可能导致问题的原因。更具体地说,您可以搜索

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

中的类似标签
<head> 
文档的

部分,删除或条件评论低于10的IE版本,因为如果它存在,将阻止您的文档在IE 10中正确呈现。