Question

I have a page that fadeIn and fadeOut an inline element and jQuery doesn’t work. And then when I change the Developer Tools to use Browser Mode of IE 7, then the fadeIn() and fadeOut() effect is showing.

Answer 1

IE has an implementation detail known as “hasLayout” that, sadly, often leaks past the API abstraction and must be dealt with head-on… This is the battle you face today: inline elements generally won’t have “layout” and thus won’t work with “filters”… which are what jQuery uses to simulate opacity on IE.

This isn’t new in IE8, and normally you wouldn’t have to worry about it at all since it’s exactly this sort of browser-specific madness that jQuery is intended to paper over… Indeed, that’s why I’m not bothering to go into detail on what “hasLayout” and “filters” actually mean – you probably don’t care, and shouldn’t have to (but, if you’re interested, google it…)

Problem is, the hack that jQuery uses under the hood to force layout (so filters work (so it can simulate opacity (since IE doesn’t implement it)))… it doesn’t work on IE8. Ain’t that just great, eh? They fixed the bug whereby display: inline elements behaved as display: inline-block elements, but neglected to implement the feature that folks were using their bug to hack in support for…

Well, nothin’ you can do about that. Writing a nasty email to Team IE might make you feel a bit better, but they’re hard at work on IE9, which should (knock on wood…) fix most of these problems. In the meantime, you’ll just have to do manually what IE used to do (kinda, sorta, and most certainly incorrectly) all by itself: force the inline element into inline-block mode:

$("myInlineElement").css({display: 'inline-block'}).faceOut();

…or better yet, put it in an IE8-only stylesheet…