MSIE 8在動態更改絕對定位元素中的文本時崩潰

我遇到了幾個不同點的問題，我相信這些問題都是相關的。也就是說，每當我嘗試在絕對定位的元素中動態地改變與jQuery相關的文本屬性時，MSIE 8立即崩潰。在這兩種情況下，我有以下結構：MSIE 8在動態更改絕對定位元素中的文本時崩潰

<div id="container" style="position:relative;"> 
    <div id="image_label" style="position:absolute;top:0px;left:0px;"> 
     <div id="text" style="float:left;">Some text.</div> 
     <img id="button1" style="float:right;" /> 
     <img id="button2" style="float:right;" /> 
    </div> 
    <img id="picture"> 
</div>

對於我還沒有表現出它們上面簡單，但DIV #container的在服務器側產生具有的CSS寬度/高度特性精確地包裹IMG #picture 。 #image_label被分配了相同的寬度，但沒有賦予高度值。

當你將鼠標懸停在的#container，絕對定位的div #image_label沿圖像的上方淡出英寸此標籤中提供了用於進一步導航的按鈕，並在其旁邊有＃文字的說明文字。該文本在一個實例中包含一個圖像標題，而在另一個實例中，當您將鼠標放在它們上方時，將更改爲解釋每個按鈕的功能。

這在我測試過的每個瀏覽器中都沒問題，除了MSIE 8，它完全崩潰時，鼠標觸發了以任何方式改變文本的事件。例如，在我的一種情況下，我試圖使用.animate（）和.fadeTo（）來使該元素及其內容（包括文本）可見，但MSIE 8不喜歡它，除非的#text內容是空的，如：

<div id="text">&nbsp;</div> 
or 
<div id="text"></div>

在其他情況下，#image_label #text開始沒有任何文字。徘徊在＃容器淡入＃圖片標籤，它工作正常。然後，用戶可以將鼠標懸停在帶有幻燈片或較大版本圖像的鏈接上（＃button1，＃button2）。然後，我將「懸停」事件處理程序分配給按鈕，以便＃文字將解釋他們所做的事情。像這樣：當我將鼠標懸停在＃Button1的

$("#button1").hover(function() { 
    $("#text").html("explanation"); 
}, function() { 
    $("#text").html(""); 
});

MSIE 8會崩潰，但會正常工作，如果我註釋掉線，$（「＃文本」）HTML（）。我可以將其替換爲：

alert($("#text").html());

，沒有任何問題，所以這個問題確實似乎涉及到的文字怎麼說元素中呈現動態變化。（或者#image_label中的任何位置，無論是否包含在子元素中或直接放在#image_label中）。

我已經繞圈試圖弄清楚這裏發生了什麼。這些相同的事件處理程序可以改變頁面其他地方不相關元素中的文本，但沒有任何問題，但是關於上下文的東西使得MSIE 8非常生氣。

有沒有人有任何想法？

來源

2012-01-09 cmw

那麼，我已經寫了一個jsFiddle的例子，雖然它沒有重現崩潰：[鏈接]（http://jsfiddle.net/TMwka/7/） – cmw 2012-01-09 21:54:17

不知道這是否會貢獻到您遇到的問題或不是，但是您每次將鼠標懸停在'＃container'上時都會將'hover'事件處理程序綁定到'＃button'，因此您最終會得到大量事件處理程序（所有人都在做同樣的事情）。由於'＃image'在頁面加載時存在，所以你最好綁定事件，這樣你就只有一個。 – 2012-01-09 22:16:59

什麼可能發生（沒有演示，看不到）是button1添加文本，導致光標不再是在button1，所以懸停輸出觸發，刪除文本，然後觸發懸停並以快速，無限的循環再次替換文本。

來源

2012-01-09 21:35:26

MSIE 8在動態更改絕對定位元素中的文本時崩潰

回答

相關問題