如何在Internet Explorer中調試菜單中的“搖擺”

Question

我必須調試一個菜單，當用戶將鼠標懸停在菜單中的每個元素上時，它們就會“擺動”。 這僅在Internet Explorer中發生。 在其他瀏覽器中，如果我正在查看標記，它將在觸發事件或應用樣式時更新，您可以在樣式跟蹤中看到它。 IE不會這樣做，如果我不知道的話。 在與頁面交互時，有什么方法可以查看資源管理器中樣式/標記的更新，實時顯示在標記/樣式視圖中嗎？

Answer 1

這聽起來很像一個舊的空格錯誤。 菜單是否由無序列表構成？ 如果是這樣，您是否在每個列表項之間返回了回車符（即每個<li> </ li>都位於單獨的行上）？

如果是這樣，請嘗試刪除所有空白（因此所有列表項都在一行上）。

Answer 2

所以我的問題是，當用戶將鼠標懸停在每個項目上時，菜單項將“擺動”。 問題是這僅發生在Internet Explorer中。 在其他瀏覽器允許您觀看標記和樣式的“實時”視圖的地方，IE僅允許您通過單擊視圖上方的按鈕或使用F5刷新該視圖。 這使事情變得復雜，因為如果將鼠標懸停在瀏覽器F5上，將會重新加載頁面。 如果您將鼠標移出並刷新菜單項已丟失，則在單擊刷新按鈕時該菜單項會更改。

我的解決方案是隔離由mouseover和mouseout事件調用的函數，這些事件是動態命名為垃圾的7個字符。 一旦知道了它們的名稱，我就可以調用它們，並自行觸發鼠標移動動作。 然后，我可以刷新標記視圖並查看正在更改的樣式，應用的樣式。

原來，鼠標懸停事件添加了一種樣式，該樣式去除了元素頂部和底部的填充。 在其他所有瀏覽器中，都將呈現盒子模型，因此這無關緊要。 在IE中，這意味着當您通過菜單移動時，所有內容都會“擺動”。

一定喜歡遺留代碼...和IE。