Html 文字阴影:IE8

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5759334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:10:32  来源:igfitidea点击:

Text-Shadow: IE8

htmlcssinternet-explorer-8ie8-compatibility-mode

提问by David Bradbury

Alright, so I'm trying to implement text-shadowacross various browsers. I have IE6, IE7, FF, Chrome, and Opera all working... but IE8 wont' show any shadows unless it is in 'Compatibility View'.

好的,所以我正在尝试text-shadow跨各种浏览器实现。我有 IE6、IE7、FF、Chrome 和 Opera 都可以工作……但 IE8 不会显示任何阴影,除非它在“兼容性视图”中。

I've looked at a number of 'solutions' via search / Google, but the shadow is still only appearing in 'Compatibility View'.

我已经通过搜索/谷歌查看了许多“解决方案”,但阴影仍然只出现在“兼容性视图”中。

Any ideas on how to get it to show up without having to change modes?

关于如何在不改变模式的情况下显示它的任何想法?

Note:Using HTML5 Boilerplate and Modernizr.

注意:使用 HTML5 Boilerplate 和 Modernizr。

edit: Added that I'm using Modernizr, and I clicked the wrong button in my tester. This isn't working in IE9 either, but I don't think it is related.

编辑:补充说我正在使用 Modernizr,并且我在测试仪中单击了错误的按钮。这在 IE9 中也不起作用,但我认为它不相关。

CSS:

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

HTML

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

采纳答案by Maverick

A website must not necessarily look the same in every browser. Plus MS filters are crap. I would recommend to use Modernizeran apply a different solution for IE8.

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

It will save you from headaches :)

它会让你免于头痛:)

回答by leymannx

I tried Modernizer(also with heygrady's polyfill). I tried cssSandpaper. I tried CSS3PIE. But none of them displayed me a text-shadow in Internet Explorer 8 (CSS3PIE doesn't feature text-shadow). I also tried the double-markup method. But that really can't be it.

我尝试了Modernizer(也使用了heygrady 的 polyfill)。我试过cssSandpaper。我试过CSS3PIE。但是他们都没有在 Internet Explorer 8 中向我显示文本阴影(CSS3PIE 没有功能text-shadow)。我也试过双标法。但这真的不可能。

And then I found Whykiki's blog postand simply added filter: dropshadow(color=#000000, offx=2, offy=2);in combination with display: block;. And that's it. Some of you might try zoom: 1;instead of display: block;to activate it. filter: glow(color=#000000,strength=2);works, too. As you will see, the MS dropshadow doesn't come with blur. I can live with that.

然后我找到了Whykiki的博客文章并简单地添加filter: dropshadow(color=#000000, offx=2, offy=2);display: block;. 就是这样。你们中的一些人可能会尝试zoom: 1;而不是display: block;激活它。filter: glow(color=#000000,strength=2);也有效。正如您将看到的,MS 阴影没有模糊。我可以忍受这一点。

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 */
}