Problem
When experimenting with CSS3 gradients and the IE gradient filter to create background gradients, I found that using the gradient filter with IE8 caused 'fuzzy' text to be displayed.
Solution
Apply a position: relative; statement to the css.
Detailed explanation
The IE filters can cause the clearType to be disabled in IE8, causing any text to be displayed to become 'fuzzy'.
The solution I found was to enclose the html code inside a wrapper, and apply a position relative statment to the outer wrappers css statment.
html -
<body>
<div id="outerWrapper">
Your html code goes here.
</div>
</body>
css -
#outerWrapper {
position: relative; /* Required to enable
cleartype in IE8 when using filter */
/* continue your css for the wrapper here.
*/
}
It may also be that you have applied a filter to a specific tag containing text. To fix the clearType problem here I would recommend applying the position: relative; statement to the tags via css, e.g. -
h1, h2, h3, p, pre /* continue the list of required tags */
{
position: relative;
}
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
