title: Text-decoration:none and text-shadow conflict
body: <p>Even though <code>text-decoration</code> is <strong>none</strong>, applying a <code>text-shadow</code> to a link appears to - on hover - show the shadow of an invisible underline (Chrome only, Firefox ok). <a href="http://jsfiddle.net/xPYGd/17/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a class="bill-area" href="#" title="Watch"&gt;
      &lt;div class="watch"&gt;&lt;h2&gt;Watch&lt;/h2&gt;&lt;/div&gt;
  &lt;/a&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a                 {color:#00C; text-decoration:none}
  a:hover           {text-decoration:underline}
  a:active          {color:#F00;}
  .bill-area        {width:580px; height:300px;display:inline-block; background:#eee}
  .watch            {position:absolute; top:60px; left:200px; display:block;}
  .watch h2         {text-align:center; color:#333; text-shadow:0 0 1px rgba(255, 255, 255, 0.6),0 2px 1px #154C77;}
  .bill-area:hover div h2  {text-decoration:none;}
  </code></pre>
  
  <p>Comment out the text-shadow to see the difference.</p>