MSIE8在动态更改绝对定位元素中的文本时崩溃

Question

我在几个不同的地方遇到了问题，我认为这些问题是相关的。也就是说，每当我试图在一个绝对定位的元素中使用jQuery动态更改一些与文本相关的属性时，MSIE8就会立即崩溃。在这两种情况下，我都有以下结构：

<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#图片#image_label被指定相同的宽度，但没有指定高度值。

当您将鼠标悬停在#container上时，绝对定位的div#image_label将沿图像顶部淡入。此标签中提供了用于进一步导航的按钮，按钮旁边有#text中的解释性文本。文本在一个实例中包含一个图像标题，在另一个实例中将更改以解释当您将鼠标放在每个按钮上时它们的功能。

这在我测试过的每个浏览器中都能顺利工作，除了MSIE 8，它在鼠标触发以任何方式更改文本的事件时都会完全崩溃。例如，在我的一种情况下，我曾尝试在#image_label上使用.animate（）和.fadeTo（）来使该元素及其内容（包括文本）可见，但MSIE 8不喜欢它，除非#文本的内容为空，例如：

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

在另一种情况下，#image_label#text开始时没有任何文本。在#container上悬停会在#image_label中淡入，效果良好。然后，用户可以将鼠标悬停在带有幻灯片或更大版本图像链接的按钮上（#button1、#button2）。然后，我将"悬停"事件处理程序分配给按钮，这样#text就会解释它们的作用

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

当我将鼠标悬停在#按钮1上时，MSIE 8将崩溃，但如果我用$（"#text"）.html（）注释掉行，它将正常工作。我可以将其替换为：

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

并且没有任何问题，所以这个问题实际上似乎与该元素中文本呈现方式的动态更改有关。（或者在#image_label中的任何位置，无论是包含在子元素中还是直接包含在#image_label中）。

我绕了一圈，想弄清楚这里发生了什么。这些相同的事件处理程序可以毫无问题地更改页面其他地方不相关元素中的文本，但#image_label的上下文让MSIE8非常非常愤怒。

有人有什么想法吗？

Answer 1

可能发生的事情（没有演示，看不见）是button1添加了文本，这导致光标不再位于button1上，因此悬停触发，删除文本，然后触发悬停，并在快速、无休止的循环中再次替换文本。