2010-08-02 61 views
2

的大小我對網站上我的類別標題簡單.slideTogglehttp://www.UtahCodeCamp.com/Sessions/jQuery的.slideToggle不改變包含分區

// Slide Toggle the headers 
$(".collapse-track").each(function() { 
$(this).click(function() { 
    $(this).next().slideToggle(); 
}); 
$(this).css("cursor", "pointer"); 
$(this).next().hide(); 
}); 

一切完美的作品在Firefox和Chrome/Safari瀏覽器,但在IE8父DIV (底部的黃色邊框)不會調整大小。然後,如果您展開所有分類並再次將其摺疊,則分類標題將相互重疊。

關於如何解決這個IE8的任何想法?我對IE6或以下的兼容性不感興趣,但我想支持IE7/8。

+0

附加信息:一位朋友提到,如果您在IE8中使用表格,jQuery通常會遇到麻煩。我試圖擴大和崩潰的內容確實有一個每個項目的表格。 – 2010-08-02 21:11:20

回答

2

您遇到的問題與jQuery slideToggle mehod沒有直接關係。相反,這是由於你的一個CSS規則。我使用的開發工具欄更改如下:

.FloatLeft { 
    width: 850px; 
    /*display: inline-block;*/ /* This line was causing the problem */ 
} 

我沒有測試過這是否會影響Firefox或Chrome雖然。

+0

謝謝!你真棒!!有時這些東西變得如此複雜,很難找出真正的問題。出於好奇,你知道哪個瀏覽器的行爲不正確嗎?在我看來,這應該會破壞所有瀏覽器? – 2010-08-02 21:49:06

+0

您擴展所有類別並再次崩潰的問題仍然存在,但現在並沒有那麼糟糕。 – 2010-08-02 21:56:58

+0

對不起,我應該提到我只在IE 8上試過。我沒有在任何其他瀏覽器上測試它,看看這個改變是否會打破他們的頁面。我建議你在你想要你的網站支持的其他瀏覽器上檢查它。至於在所有瀏覽器上被破解的情況,情況並非總是如此,因爲每個瀏覽器都可以不同地實現CSS規範,這導致在不同瀏覽器上呈現頁面時出現不一致。 – 2010-08-02 22:02:48