獲取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一起工作

回答

相關問題