Question

We just spent some time chasing down some really weird jQuery/css behavior in IE7/8.

We do some animations and height measuring. While animating we don’t want text to wrap. So we did this:

$(selector).css("white-space", "nowrap");
... animate ...
$(selector).css("white-space", "inherit");

This works GREAT on FF, Chrome, Safari, iPad, even IE9, but on IE7 or 8 we get a Javascript error:

"Could not get the whiteSpace property. Invalid argument"

Deep in the bowels of jQuery. After some head scratching, we ended up doing this:

First, define a class in the .css:

/* Kludge to avoid IE7/8-jQuery css('white-space') problem? */
.nowrap { white-space: nowrap; }

Then modify the above animation code:

$(selector).addClass("nowrap");
... animate ...
$(selector).removeClass("nowrap");

now everybody’s happy, but the kludge really bugs me. Does jQuery do some sort of CSS translation for IE? We’re on jQuery 1.4.2.

Answer 1

Testing here: http://jsfiddle.net/nL48C/ / http://fiddle.jshell.net/nL48C/show/light/
The error is there in IE7 and IE8 in [IE7] Compatibility Mode. It works fine in IE8 Standards Mode.

Comment out the inherit line: http://jsfiddle.net/nL48C/1/ / http://fiddle.jshell.net/nL48C/1/show/light/
The error is gone.

I know that IE7 almost completely doesn’t support inherit, so that’s the source of the problem.

However, if you try inherit with jQuery 1.4.4, there is no error:
http://jsfiddle.net/nL48C/2/ / http://fiddle.jshell.net/nL48C/2/show/light/

It looks like jQuery 1.4.2 lacks some magic that 1.4.4 has to work around this problem.

jQuery 1.4.2:

if ( set ) {
    style[ name ] = value;
}

jQuery 1.4.4:

// Wrapped to prevent IE from throwing errors when 'invalid' values are provided
// Fixes bug #5509
try {
    style[ name ] = value;
} catch(e) {}

• http://bugs.jquery.com/ticket/5509
• https://github.com/jquery/jquery/commit/2ca36598954759c5b5dce569a39c52b981ed4ab2

Solution:

• Don’t set it to inherit, set it to normal, which is the initial value.