IE8: Disable cleartype?

Answer 1

You can't. ClearType is a user setting on the browser. Any CSS which would disable it for certain elements is most likely a bug, not a feature (I've noticed it gets disabled for some dynamically generated or animated elements) and shouldn't be relied upon.

Whatever your preference in this regard is is probably not the user's one who sees your site. So why bother? Whoever doesn't like ClearType probably has it disabled already.

Note: The reason why it works with filters is that filters are not rendered by the browser but something else (DirectX probably, considering the "DX" in there. I'd still consider that a side-effect, and not a feature).

Answer 2

From what I recall, Internet Explorer 7+ disables ClearType when a filter is set on an element

#target {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}

_{Also, do consider that many users may find disabling ClearType to be annoying. Use sparingly!}

Answer 3

There is no CSS solution to disable cleartype. The reason that you could do it in IE7 was a biproduct of how the browser rendered text in elements that used filters. Appearently IE8 handles this better so that you can't use that hack any more (at least not without actually applying some filter).

The use of cleartype is a user choise, and not something that you should impose on visitors. Personally I really like cleartype, and if I visisted a site where it was disabled I would think that the site looked really crappy.

The fact that text is rendered differently in different browsers and different operating systems is something that you have to live with. If you want it to look exactly the same for everyone, you have to make it an image.

Answer 4

Cleartype sometimes looks stupid in JavaScript/AJAX-based solutions but this topic possible answers to that question why some jQuery based animations look be broken in IE.. so answer is that when JavaScript makes fade effect with opacity (opactiy to 0 from 100 in 1 second duration) then cleartype fonts are removed from element that come to fade out and animation looks bloody shit.

Answer 5

very good this code:

target {

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);

}

congratulations.

Answer 6

Juliano, body{ filter:none } is a better, cleaner solution. Using opacity causes problems in some situations.

To answer all the ClearType enthusiasts--I like ClearType too. I think it's a great advancement for LCD monitors. Problem is that when IE tries to use ClearType on some specific elements, it looks worse than if you had ClearType disabled. These include elements that are faded into view (using javascript) as well as imported @font-face fonts. If you like ClearType, then you're going to hate what IE does when it tries to use ClearType in these situations...your text looks chunky, fat and ugly.

In these cases, ClearType should be removed if possible to achieve the smooth fonts you guys want.

Answer 7

for some reason positioned elements (anything inside { position: relative } ) -- isn't animated w/ an opacity less than 1.

Answer 8

You can have both an MS CSS filter on an element and still enable ClearType on the font within. Just add a child element and set its css "position" to "relative" and ClearType does not get disabled. Copy the following and try it.

<style>
#parent{
     background-color:white;
     filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=2);
     position:relative;
     border:solid 1px black;
     padding:10px;
     width:500px;
}
#child{
     position:relative; /*THIS SOLVED THE CLEARTYPE DISABLING PROBLEM IN BOTH IE7 & IE8*/ :)
}
</style>

<div id="parent">
     <div id="child">This text should always be smooth</div>
</div>

Answer 9

Just want to thank Kris for your help. That solved my problems and was easily done.