获取IE文本阴影polyfill与Modernizr一起工作

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

<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，阴影放置在文本下方一半的位置。随着其他任何东西的阴影片散布在页面周围。

来源

2011-09-05 Mr Alpha

尝试使用Microsoft DropShadow CSS滤镜为：

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

其中：

颜色是影子
Offx RGB值 - 影子像素由x
Offy - 影子像素由Y

来源

2011-09-16 12:36:00 antyrat

问题是，与模糊滤镜相比，Microsoft DropShadow滤镜令人难以置信的难看。这就是我使用这个polyfill而不是DropShadow过滤器开始的原因。 –

你有一些例子吗？以jsFiddle为例。 – antyrat

作者在这里做了一堆比较：http://heygrady.com/blog/2011/03/10/css-text-shadows-in-internet-explorer/ –

答案很简单偏移：忘记在IE文字阴影。没有什么可用的，可以足够接近其他浏览器。

来源

2011-09-20 04:50:15

-1

可以使用Css3Pie到文字阴影和边界半径：

http://css3pie.com/

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

来源

2012-01-26 16:22:01 cesarin3134

它不看起来像CSS3Pie支持文本阴影，只有盒子阴影。 –

我得到它的工作，但我不得不重写.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和Firef之间的差异牛。

来源

2012-04-09 19:16:50 K4GDW

获取IE文本阴影polyfill与Modernizr一起工作

回答

相关问题