问题 Text-Shadow：IE8

好吧，所以我正在尝试实施 text-shadow 各种浏览器。我有IE6，IE7，FF，Chrome和Opera都在工作......但IE8不会显示任何阴影，除非它在'兼容性视图'中。

我通过搜索/谷歌查看了一些“解决方案”，但影子仍然只出现在“兼容性视图”中。

有关如何让它显示而不必更改模式的任何想法？

注意： 使用HTML5 Boilerplate和Modernizr。

编辑：补充说我正在使用Modernizr，我点击了测试仪中的错误按钮。这在IE9中也不起作用，但我不认为它是相关的。

CSS：

#links li a {
font-size: 24px;
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530');
filter:DropShadow(Color=#102530, OffX=0, OffY=3);
zoom: 1;
}

HTML

<ul id="links">
    <li><a href="#"/>Text</a></li>
</ul>

3762

2018-04-22 19:40

起源

我想你只能使用 filter 一次，如果您想要多个效果，请使用逗号分隔。不过100％肯定。 - Shaz

我简直不敢相信我正在启动 Windows XP模式为了这... - BoltClock♦

我只为IE使用一个过滤器。我用逗号分隔 text-shadow 首先，但有两个回退，一个用于IE8，一个用于IE5.5-7.0，但IE8回退似乎没有兼容模式。编辑：谢谢BoltClock，哈哈 - David Bradbury

我做了这个工作，但投影看起来如此可怕在IE8中，我不打算将其作为答案发布。忘记IE投影，它看起来很恶心： i.imgur.com/R1rBl.png - thirtydot

我猜这就是原因 text-shadow 也没有进入IE9。 - BoltClock♦

答案:

每个浏览器中的网站不一定相同。加上MS过滤器是垃圾。我建议使用近代化为IE8应用不同的解决方案。

它会让你免于头痛:)

2018-04-22 19:45

我正在使用Modernizr，但如果我可以避免它，我宁愿不添加非语义标记。 - David Bradbury

dowebsitesneedtolookexactlythesameineverybrowser.com - Shaz

如果任何东西都是非语义的，那就是MS过滤器。 Modernizer课程尽可能有效。 - Maverick

有效性对我来说并不重要。 CSS应包括所有样式，HTML应包含所有信息。如果我需要包含一个不是标准的额外过滤器，那对我来说没问题。但添加额外的span标签并复制文本似乎有点傻。我还应该补充一点，阴影有点重要，没有它，文本和背景之间的对比度非常小。 - David Bradbury

我在谈论做一个手动文本阴影来补偿不支持的浏览器 text-shadow。我可能只是用 .no-textshadow 然后扔一个不同的背景图像。 - David Bradbury

我试过了近代化（也有 heygrady的polyfill）。我试过了 cssSandpaper。我试过了 CSS3PIE。但是他们都没有在Internet Explorer 8中显示我的文本阴影（CSS3PIE没有功能 text-shadow）。我也试过了双标记方法。但那真的不可能。

然后我找到了 Whykiki的博文并简单地添加 filter: dropshadow(color=#000000, offx=2, offy=2); 与...结合 display: block;。就是这样。有些人可能会尝试 zoom: 1; 代替 display: block; 激活它。 filter: glow(color=#000000,strength=2); 也有效。正如您将看到的，MS drophadow并非模糊。我可以忍受这一点。

h1 {
  color: #fce934;
  text-shadow: 2px 2px 2px #000000;
  -moz-text-shadow: 2px 2px 2px #000000;
  -webkit-text-shadow: 2px 2px 2px #000000;
  filter: dropshadow(color=#000000, offx=2, offy=2);
  display: block; /* that's the important part */
}

2018-03-05 14:42

这应该是选择的anwer - Daan

感谢您的建议...对我的IE8问题非常有用。 - user2662680

问题 Text-Shadow：IE8

答案:

热门问题