IE 8 bug? Drop shadow with Gradient background, and the text becomes grey

This is an example on http://jsfiddle.net/Eu5by/11/ and on http://jsfiddle.net/Eu5by/12/

(Update: actually, it doesn't need to be a link: see http://jsfiddle.net/Eu5by/14/ and it is just text)

the code is basically:

<div id="main-box">    
  <a id="box" href="http://www.google.com">
      hello world
  </a>    
</div>

with the CSS

#main-box {
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#dddddd')
}

#box {
    display: block; width: 300px; height: 60px; line-height: 60px; text-align: center; background: #ffc; color: #ff7000;

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f9ff', endColorstr='#e8f3ff',GradientType=0 )
}

the text will appear gray on IE 8. The first jsfiddle link uses filter while the second one uses -ms-filter Is there a way to fix this?

(I am tryin开发者_如何学编程g on IE 8 on a virtual machine. If it is on my IE 9 then it works fine.)

On IE 8, if either the drop shadow or the gradient is removed, then the link will have the correct color again.

There's a bug documented on QuirksMode.

Try setting the zoom factor to anything other than 100% ;)