Joe Lanman

Affects: IE6, IE7

Description

When using jQuery to fade elements, Internet Explorer will remove anti-aliasing from text (causing it to appear pixelated) .

Workaround

Remove the ‘filter’ attribute used by IE to fade elements once the fade is complete (view the full post to read the code)

Continue Reading »

Affects: IE 8

Description

When using jQuery or similar to fade an element (animate its opacity) IE 8 does not fade child elements that have any ‘position’ property set (’relative’, ‘absolute’, etc).

Workaround

Removing position rules will work, but presumably you’re using them to, well position stuff. The only workaround I have found is to use the IE 7 compatibility meta tag to force IE 8 to render as 7 would.

Unfortunately this means you have to deal with the IE6/7 text anti-alias bug - workaround here

See also

http://glow-project.lighthouseapp.com/projects/33663/tickets/161-fade-animation-children-with-positionrelative-ignore-the-opacity-of-the-parent-in-ie

http://flowplayer.org/tools/forum/55/28425

Affects: IE7, IE8

Description

Input fields wrapped with an inline element will render with an extra 1 pixel margin above and below, regardless of the ‘margin’ property set in the CSS rule.

Workaround

1) Use a conditional comment or similar to serve a margin rule to IE that is 1px less than desired. So for no margin:

form input, form textarea{
    margin:			-1px 0;
}

2) Remove the border from the input - this will also remove the extra margin.