Recently, we encountered an unusual issue with jQuery and CSS while working on compatibility with IE7 and IE8.
Our project involves animations and height measurements, and during the animations, we wanted to prevent text from wrapping. To achieve this, we initially tried:
$(selector).css("white-space", "nowrap");
... animate ...
$(selector).css("white-space", "inherit");
This approach worked perfectly on browsers like Firefox, Chrome, Safari, iPad, and even IE9. However, in IE7 or 8, it triggered a JavaScript error:
"Could not get the whiteSpace property. Invalid argument"
After some troubleshooting, we came up with a workaround:
First, we defined a new class in our .css file:
/* Workaround for solving IE7/8-jQuery css('white-space') issue */
.nowrap { white-space: nowrap; }
We then adjusted our animation code as follows:
$(selector).addClass("nowrap");
... animate ...
$(selector).removeClass("nowrap");
With this solution in place, everything was functioning correctly again. However, the workaround did leave us feeling uneasy. Is jQuery somehow handling CSS differently for IE? Our current version is jQuery 1.4.2.