2011-06-28 66 views
3

我們只是花了一些時間在IE7/8中追尋一些非常奇怪的jQuery/css行爲。jquery css(空白)IE7/8的bug?

我們做一些動畫和高度測量。雖然動畫我們不希望文字換行。所以我們做了:

$(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"); 

現在每個人都開心,但kludge真的讓我感到困擾。 jQuery是否爲IE做了某種CSS翻譯?我們在jQuery 1.4.2上。

回答

3

測試這裏: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幾乎完全doesn't support inherit,所以這是問題的根源。

但是,如果你嘗試inherit使用jQuery 1.4.4,沒有錯誤:
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