title: text rendering is screwed with "gradient" on IE
body: <p>RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a <strong>handy tool</strong> provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.</p>
  
  <p>applying <code>georgia</code> to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle <a href="http://jsfiddle.net/mvivekc/GJaDy" rel="nofollow noreferrer">http://jsfiddle.net/mvivekc/GJaDy</a> </p>
  
  <p>the code is--</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=9" /&gt;
  &lt;html&gt;
  &lt;style type="text/css"&gt;
  .georgiaWithTransform{
      font-family: Georgia;
      height: 80px;
      width: 800px;
       font-family: "Georgia", Geneva  ;
      word-wrap:break-word;
        background-color: rgba(150, 150, 150, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
                  zoom: 1;
  
   }
   .georgiaWithoutTransform{
      font-family: Georgia;
      margin-top: 30px;
      height: 80px;
      width: 800px;
       font-family: "Georgia", Geneva  ;
  word-wrap:break-word;
    background-color: rgba(150, 150, 150, 0.3);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
  
   }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div class="georgiaWithTransform"&gt;Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening&lt;/div&gt;
  &lt;div class="georgiaWithoutTransform"&gt;Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Cant understand why this is happening and badly need a workaround for this problem.</p>
  
  <p>Here's a screen shot of the problem on IE8 --
  <img src="https://i.stack.imgur.com/P8Rjg.jpg" alt="enter image description here"></p>
  
  <p>Same happens on the fiddle as well.. problem is seen only on IE,not sure why..</p>
  
  <p>Please help,
  Thanks in advance</p>