让 IE 文本阴影 Polyfill 与 Modernizr 一起使用

Question

我正在尝试获取一个小的polyfill（https://github.com/heygrady/textshadow）来添加文本阴影效果在 Internet Explorer 上工作，但似乎无法弄清楚如何使其工作。这是我正在使用的代码：

<script src="@Url.Content("~/Scripts/modernizr.custom.61772.min.js")" type="text/javascript"></script>
<script>
    Modernizr.load({
        test: Modernizr.textshadow,
        nope: ['/Content/jquery.textshadow.css', '/Scripts/jquery.textshadow.js'],
        complete: function () {
            $('h1').textshadow('1px 1px 2px #111')
        }
    });
</script>

我确实得到了效果，但看起来完全错误。我只是再次得到原始标题文本，其格式与原始文本完全相同，但向底部偏移了半个行高。

编辑：所以经过一些实验，我发现我至少可以通过手动为类创建 CSS 规则来获得阴影效果，而不是依靠 javascript 来实现，如下所示：

h1 .ui-text-shadow-copy 
{
    color: #111; /* color */
    filter:
        progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
    left: 0px; /* left - blur */
    top: 0px; /* top - blur */
}

但定位仍然搞砸了。左侧 0px，顶部 0px，阴影放置在文本下方半行。与其他任何东西一样，阴影的碎片会散布在页面周围。

Answer 1

我让它工作，但我必须重写 .textshadow 方法内的 css 样式才能使其看起来正确。以下是对我有用的方法：

支持文本阴影的浏览器的 CSS：

.ts {
  text-shadow: 2px 2px 2px #111111;
  -moz-text-shadow: 2px 2px 2px #111111;
  -webkit-text-shadow: 2px 2px 2px #111111;
}

Modernizr.load：

Modernizr.load([
    {// load jquery
       load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
       complete: function () {
            if (!window.jQuery) {
                Modernizr.load('/TimeTracker/Scripts/jquery-1.7.1.min.js');
            }
    }
    },
    {//other scripts that depend on jquery, including jquery ui
        load: ['some.js','some.other.js']
    },
    {
       test: Modernizr.textshadow,
       nope: ['/url/to/jquery.textshadow.css','/url/to/jquery.textshadow.js']
    },
    '/url/to/file/that/contains/document.ready.js'
]);

document.ready.js：

var m = window.Modernizr;

function loadJqueryTextshadow() {
    $('.ts').textshadow('2px -12px 2px #111111');
}

$(function(){
    if (!m.textshadow) {
        loadJqueryTextshadow();
    }
}

最终结果足够接近，以至于大多数用户永远不会知道 IE、Chrome 和 Firefox 之间的区别。

Answer 2

尝试使用 Microsoft DropShadow css 过滤器：

h1 .ui-text-shadow-copy {
  filter: progid:DXImageTransform.Microsoft.DropShadow(Color=#111111, OffX=1, OffY=1);
}

---

其中：

• Color 是阴影的 RGB 值
• Offx - 阴影偏移 x
• 的像素Offy - 阴影偏移 y 的像素

Answer 3

简单的答案：忘记 IE 中的文本阴影。没有任何可用的东西可以渲染得足够接近其他浏览器。

Answer 4

您可以使用 Css3Pie 进行文本阴影和边框半径：

http://css3pie.com/

Modernizr.load([
{
test: Modernizr.borderradius && Modernizr.boxshadow,
nope: 'PIE.htc' }
]); /*fine load modernizr*/