jQuery IE8 - Firefox問題

Question

我有一個使用jQuery框架的IE8的大問題。

什麼在Firefox上有效，在IE8中不能正常工作。我甚至不檢查IE7 :)。

基本上，我有簡單的動畫顯示/隱藏div層，也移動上/下 - 左/右一些div層。沒什麼特別的，只是在頁面上添加一些動作。所以當你點擊聯繫人，而不是導航向上移動並顯示聯繫人時，聯繫人向下移動並打破布局，這並不是什麼大問題，但是當你按下客戶區並按下聯繫人時 - 它完全打破了佈局 - 大問題。

請幫忙。 您可以瀏覽網站here

Answer 1

不明白「它完全打破了佈局」的含義。我只在IE瀏覽器中看到當你訪問客戶區時頁面震動。這是由於高度和「自動」滾動條。擁有一個固定的y滾動條不是一個好的解決方法。

但是在訪問客戶區域後單擊聯繫鏈接並沒有顯示與FF中的不同之處。

快速瀏覽HTML源代碼後，我只能說你確實需要擺脫HTML過渡性DTD並獲得HTML嚴格的DTD。它將解決大部分與CSS相關的問題。 Learn more here。

Answer 2

一些觀察。首先，您在「#moveContact」上描述的IE8行爲僅適用於正常模式。如果點擊「兼容模式」，URL框右側的斷開的頁面圖標，則會出現不同的（並且仍然是錯誤的）行爲。

其次，包括jQuery的方式是這樣的：

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js 

我會鼓勵你提供你自己的jQuery的副本。你可以這樣做here。我會去最新的1.3.2。這可能會解決您的問題。我注意到1.3版的發佈說明顯示了針對IE7的最新IE測試。

Answer 3

我注意到代碼依賴於marginTop屬性來動畫元素。

例如爲的聯繫人信息的單擊事件處理程序：

$("#moveContact").click(function(){ 

利用了marginTop屬性：

marginTop: "167px", 

這是在Internet Explorer越野車，並可能導致意外的行爲。有關更多信息，請參見article about margin-top。

這不是jQuery的問題，它與Internet Explorer解釋margin-Top值的方式有關。我不確定這是否是動畫不能正常工作的原因，但這將是一個開始尋找的好地方。

Answer 4

+1 Daniel：由保證金崩潰問題引起的。即使沒有IE問題，保證金崩潰也足以讓人困惑，並且通常最好避免。將動畫更改爲僅使用填充和定位將使其更加可靠。

此外，您需要從事件處理程序中的return false停止正在遵循的#鏈接，導致瀏覽器跳回到頁面頂部。

最後，給每個具有position（相對或絕對）的元素一個明確的z-index屬性以避免IE7默認它們的錯誤，從而導致錯誤堆疊，導致聯繫地址不可見。