Question

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

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

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

注意：使用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>

Answer 1

我尝试Modernizer（同时使用heygrady's polyfill）。我试过了cssSandpaper。我试过了CSS3PIE。但是他们都没有在Internet Explorer 8中向我显示文本阴影（CSS3PIE没有text-shadow功能）。我也试过了double-markup method。但那确实不可能。

然后我找到Whykiki's blog post并简单地将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 */
}

Answer 2

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

它可以让您免于头痛：）

Text-Shadow：IE8

2 个答案: