3

我正在尝试使用一个小的 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 阴影放置在文本下方半行处。随着其他任何东西的阴影散布在页面周围。

4

4 回答 4

2

我让它工作，但我必须覆盖 .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'
]);

文档.ready.js：

var m = window.Modernizr;

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

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

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

于 2012-04-09T19:16:50.093 回答
0

尝试为此使用 Microsoft DropShadowcss 过滤器：

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

在哪里：

  • 颜色是阴影的 RGB 值
  • Offx - 阴影偏移 x 的像素
  • Offy - y 偏移的阴影像素
于 2011-09-16T12:36:00.467 回答
0

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

于 2011-09-20T04:50:15.150 回答
-1

you can use Css3Pie to text-shadow and border-radius:

http://css3pie.com/ 

Modernizr.load([
{
test: Modernizr.borderradius && Modernizr.boxshadow,
nope: 'PIE.htc' }
]); /*fine load modernizr*/
于 2012-01-26T16:22:01.233 回答