Сбой MSIE 8 при динамическом изменении текста в абсолютно позиционированном элементе

Я сталкиваюсь с проблемами в нескольких разных местах, которые, я считаю, связаны. А именно, всякий раз, когда я пытаюсь динамически изменить какое-либо свойство, связанное с текстом, с помощью 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, который полностью падает в тот момент, когда мышь запускает событие, которое каким-либо образом изменяет текст. Например, в одной из моих ситуаций я пытался использовать .animate() и .fadeTo() для #image_label, чтобы сделать этот элемент и его содержимое (включая текст) видимыми, но 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("");
});

MSIE 8 аварийно завершает работу при наведении курсора на #button1, но будет нормально работать, если я закомментирую строки с помощью $("#text").html(). Я могу заменить его на:

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

и не имеют проблем, поэтому проблема действительно связана с динамическим изменением того, как текст отображается внутри этого элемента. (Или где-нибудь внутри #image_label, внутри дочернего элемента или непосредственно в #image_label).

Я ходил по кругу, пытаясь понять, что здесь происходит. Эти же обработчики событий могут без проблем изменять текст в несвязанных элементах в других местах страницы, но что-то в контексте #image_label очень сильно раздражает MSIE 8.

У кого-нибудь есть мысли?


person cmw    schedule 09.01.2012    source источник
comment
Ну, я написал пример в jsFiddle, хотя он не смог воспроизвести сбой: ссылка   -  person cmw    schedule 10.01.2012
comment
Не уверен, будет ли это способствовать проблемам, с которыми вы сталкиваетесь, или нет, однако в настоящее время вы привязываете дополнительный обработчик событий hover к #button каждый раз, когда они наводят курсор на #container, поэтому в конечном итоге вы получите большое количество обработчиков событий. (все делают одно и то же). Поскольку #image существует при загрузке страницы, вам лучше привязать событие, чтобы у вас было только одно.   -  person Anthony Grist    schedule 10.01.2012


Ответы (1)


Что может произойти (нет демонстрации, не видно), так это то, что button1 добавляет текст, из-за чего курсор больше не находится над button1, поэтому срабатывает наведение, удаляя текст, который затем вызывает наведите курсор и снова замените текст в быстром бесконечном цикле.

person Diodeus - James MacFarlane    schedule 09.01.2012