Я сталкиваюсь с проблемами в нескольких разных местах, которые, я считаю, связаны. А именно, всякий раз, когда я пытаюсь динамически изменить какое-либо свойство, связанное с текстом, с помощью 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"> </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.
У кого-нибудь есть мысли?
hover
к#button
каждый раз, когда они наводят курсор на#container
, поэтому в конечном итоге вы получите большое количество обработчиков событий. (все делают одно и то же). Поскольку#image
существует при загрузке страницы, вам лучше привязать событие, чтобы у вас было только одно. - person Anthony Grist   schedule 10.01.2012