jquery css(white-space)IE7 / 8 bug?

时间:2011-06-28 18:26:44

标签: jquery css

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

我们做一些动画和高度测量。动画时,我们不希望文本换行。所以我们这样做了:

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

这适用于FF,Chrome,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。

1 个答案:

答案 0 :(得分:3)

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

评论inherit行:http://jsfiddle.net/nL48C/1/ / http://fiddle.jshell.net/nL48C/1/show/light/
错误消失了。

我知道IE7几乎完全doesn't support 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) {}

<强>解决方案:

  • 请勿将其设为inherit,将其设为normal,即initial value