Как заставить IE text-shadow polyfill работать с Modernizr

Question

Я пытаюсь получить небольшой полифил (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

Я заставил его работать, но мне пришлось переопределить стиль CSS внутри метода .textshadow, чтобы он выглядел правильно.Вот что сработало для меня:

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

Простой ответ: забудьте о текстовой тени в IE. Там нет ничего доступного, что может сделать достаточно близко к другим браузерам.

Answer 3

Вы можете использовать Css3Pie для тени текста и радиуса границы:

http://css3pie.com/

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

Answer 4

Попробуйте использовать для этого фильтр Microsoft DropShadow css:

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

---

Где:

• Цвет - значение RGB для тени
• Offx - пиксели для смещения тени на x
• Offy - пиксели для смещения тени на y