title: Getting IE text-shadow polyfill to work with Modernizr
body: <p>I am trying to get a small polyfill (<a href="https://github.com/heygrady/textshadow" rel="nofollow">https://github.com/heygrady/textshadow</a>) to add text-shadow effect on Internet Explorer to work, but can't seem to figure out how to make it work. This is the code I'm using:</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/modernizr.custom.61772.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
      Modernizr.load({
          test: Modernizr.textshadow,
          nope: ['/Content/jquery.textshadow.css', '/Scripts/jquery.textshadow.js'],
          complete: function () {
              $('h1').textshadow('1px 1px 2px #111')
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I do get an effect but it looks all wrong. I just end up with the original heading text all over again, with the exact same formatting as the original text, but offset towards the bottom by half a line height. </p>
  
  <p>EDIT: So after some experimenting I found out that I can at least get the shadow effect by manually creating the CSS rules for the class, rather than relying on javascript to do so, like so:</p>
  
  <pre><code>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 */
  }
  </code></pre>
  
  <p>But the positioning is still screwed up. With left 0px and top 0px the shadow is placed half a line below the text. With anything else pieces of the shadow is spread out around the page.</p>