jQuery CSS（white-space）IE7/8 bug？

Question

我们刚刚花了不少时间在IE7/8中追踪一些非常奇怪的jQuery/css行为。

我们进行了一些动画和高度测量。在进行动画时，我们不希望文本换行。所以我们做了这个：

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

在火狐，谷歌浏览器，Safari、iPad和IE9等浏览器中，这个功能表现非常好。但是在IE7或8中，我们遇到了一个JavaScript错误：

"Could not get the whiteSpace property. Invalid argument"

在jQuery的深处。经过一番思考，我们最终做了以下操作：

首先，在.css中定义一个类：

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

然后修改以上动画代码：

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

现在大家都很高兴，但是这个拙劣的代码真的让我很烦恼。jQuery是否可以为IE执行一些CSS翻译？我们使用的是jQuery 1.4.2版本。

- n8wrl

Answer 1

在这里进行测试：http://jsfiddle.net/nL48C/ / http://fiddle.jshell.net/nL48C/show/light/
在IE7和IE8的[IE7]兼容模式下出现错误。在IE8标准模式下正常工作。

注释掉inherit行：http://jsfiddle.net/nL48C/1/ / http://fiddle.jshell.net/nL48C/1/show/light/
错误消失了。

我知道IE7几乎完全不支持inherit，这就是问题的根源。

然而，如果你使用jQuery 1.4.4尝试inherit，就没有错误：
http://jsfiddle.net/nL48C/2/ / http://fiddle.jshell.net/nL48C/2/show/light/

看起来jQuery 1.4.2缺少一些魔力，而1.4.4具有解决这个问题的能力。

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

解决方案:

• 不要将其设置为inherit，而是设置为normal，这是初始值。

- thirtydot