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样式，使其看起来正确。这对我有用：

支持text-shadow的浏览器的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);
}

其中：

颜色是阴影的RGB值
Offx - 阴影偏移的像素x
Offy - 阴影偏移的像素为y

Answer 3

简单回答：忘记IE中的文字阴影。没有什么可以提供足够接近其他浏览器的。

Answer 4

您可以将Css3Pie用于text-shadow和border-radius：

http://css3pie.com/

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

使IE text-shadow polyfill与Modernizr一起使用

4 个答案: