Я сталкиваюсь с проблемами в нескольких разных местах, которые, я считаю, связаны между собой. А именно, всякий раз, когда я пытаюсь динамически изменить какое-либо свойство, связанное с текстом, с помощью 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 назначена такая же ширина, но для высоты не назначено значение.
Когда вы наводите курсор на # контейнер , абсолютно позиционированный 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 начинается без текста. При наведении на # контейнер исчезает в # 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.
У кого-нибудь есть мысли?