text rendering is screwed with “gradient” on IE

RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.

applying georgia 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 http://jsfiddle.net/mvivekc/GJaDy

the code is--

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.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 */

 }
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">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)</div>
</body>
</html>

Cant understand why this is happening and badly need a workaround for this problem.

Here's a screen shot of the problem on IE8 --

Same happens on the fiddle as well.. problem is seen only on IE,not sure why..

Please help, Thanks in advance

回答1:

I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.

P.S : using an image as a workaround did work like a charm for me.

IE Filter Antialiasing problem

回答2:

Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.