Question

我正在使用jQuery Cycle plugin来浏览网页上的一些图片。

每个图像还具有各种元数据（标题，描述），也显示在页面上。每当图像改变时，标题和描述文本也会变为该图像的标题和描述。

<div id='slides'> 
    <a href="http://whatever.com">
         <img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
    </a>
    <a href="http://somewhere.com">
        <img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
    </a>
    <a href="http://nowhere.com">
         <img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
    </a>
</div> 
<div id='slideshow_text'> 
    <div id='ss_title'>The title goes here</div> 
    <div id='ss_desc'>The description goes here</div> 
</div>

javascript非常简单：

jQuery(document).ready(function(){
    jQuery('#slides').cycle({
        fx:         'fade',
        speed:      1000,
        timeout:    10000,
        after:     alterSlideText,
    });
});

alterSlideText javascript函数非常简单。基本上它只是运行这个：

jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);

slides_array只是每张幻灯片的标题和说明数组。因此，根据当前显示的幻灯片，它会选择适当的标题和描述以放入div。

总体而言，设置非常简单明了。图像变化。然后文字改变了。

现在问题 - 这一切都在Moz和Webkit中完美运行。但是在IE中，文本div不会改变UNTIL我将鼠标移到slides div或slideshow_text div上。如果我让它坐在那里，那么文本根本就不会改变。将鼠标移动到该div后，将其更改为相应的文本。

一个可能重要的注意事项，slideshow_text div具有非常高的z-index值（1000），它实际上浮动在图像的一部分上。我刚刚确认其他具有正常z-index值的div中的文本变化很好。只有这些具有高z-index值的div才会在鼠标悬停之前不会改变。

有没有人知道为什么会这样以及如何修复它？

Answer 1

我通过将以下内容添加到alterSlideText函数的末尾来修复此问题：

// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();

很棒的IE开发人员。去找一份不同的工作。

IE8 jQuery文本在z-index div上发生了变化

1 个答案: