动态更改绝对定位元素中的文本时，MSIE 8 崩溃答案

【问题标题】：MSIE 8 crashing when dynamically altering text in an absolutely positioned element动态更改绝对定位元素中的文本时，MSIE 8 崩溃
【发布时间】：2012-01-10 05:35:26
【问题描述】：

我在几个不同的地方遇到了问题，我认为这些问题是相关的。也就是说，每当我尝试在绝对定位的元素中使用 jQuery 动态更改与文本相关的某些属性时，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 会沿图像顶部淡入。此标签中提供了用于进一步导航的按钮，其旁边的 #text 中带有说明性文本。文本在一个实例中包含一个图像标题，而在另一个实例中，当您将鼠标悬停在每个按钮上时，它们会更改以解释每个按钮的功能。

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

<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("");
});

当我将鼠标悬停在 #button1 上时，MSIE 8 会崩溃，但如果我用 $("#text").html() 注释掉这些行，它将正常工作.我可以将其替换为：

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

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

我一直在兜圈子，试图弄清楚这里发生了什么。这些相同的事件处理程序可以毫无问题地更改页面上其他地方不相关元素中的文本，但是关于 #image_label 的上下文的某些内容让 MSIE 8 非常非常生气。

有人有什么想法吗？

【问题讨论】：

好吧，我已经在 jsFiddle 中编写了一个示例，虽然它未能重现崩溃：link
不确定这是否会导致您遇到的问题，但是您当前正在将一个额外的 hover 事件处理程序绑定到 #button 每次悬停在 @987654328 上时@ 所以你最终会得到大量的事件处理程序（都做同样的事情）。由于#image 在页面加载时存在，因此您最好绑定事件，这样您就只有一个。

标签： jquery text internet-explorer-8 position absolute

【解决方案1】：

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

【讨论】：