IE4-7 Jagged Text Problem After Applying Filter and the Solution

IE4 until IE7 is notorious to have this anti-alias being turned off after applying a filter to a text (with the position property is set to absolute) such as the opacity filter used for fade in and fade out. For example, the following HTML codes will show the jagged text (without anti-alias) after even applying an empty filter in IE7:

<span id="test" style="position:absolute;top:10px;left:10px;">Remove Filter</span> <script> document.getElementById('test').filter = ""; </script>

In order to tell IE4-7 to turn the anti-alias back on, the filter has to go by removing it from the DOM.

<span id="test" style="position:absolute;top:10px;left:10px;">Remove Filter</span> <script> document.getElementById('test').filter = ""; document.getElementById('test').style.removeAttribute("filter"); </script>

There you go. The removeAttribute() has to be used to clear the element of any filter. Setting the filter to none still make IE4-7 think that the filter feature will still be needed and you just disable it temporarily.