2

这在 Chrome、Firefox 中会间歇性发生，尤其是在 Safari 中。在IE中没有观察到。幻灯片显示从顶部比通常更远，但按预期运行。在硬刷新时更频繁地发生，使其看起来像 document.ready() 问题。

页面在这里： http: //privatecare.dreamhosters.com/

正确负载：

正确的负载

不正确的负载：

不正确的负载

jQuery初始化：

<script src="http://code.jquery.com/jquery-latest.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script> 

<script type="text/javascript">
  $(document).ready(function(){
    $('#homeSlides').cycle({ 
      fx: 'fade', 
      speed:  2500
    });
  });
</script>

HTML：

<div id="homeSlides">
<img src="/g/home/slide1.jpg" alt="Connecting You to Better Care" width="639" height="348" onclick='window.location="/why_choose_pca"' />
<img src="/g/home/slide2.jpg"  width="639" height="348" alt="Updates on DOL’s Proposed Amendments to Companionship and Live-In Worker Regulations" border="0"  onclick='window.location="/dol-issue-updates"'  />
<img src="/g/home/slide3.jpg" alt="Promoting the Rights of Independent Caregivers and Registries Since 1977" width="639" height="348" onclick='window.location="/caregivers"' />
<img src="/g/home/slide4.jpg" alt="The Consumer-Directed Model Puts You in Control" width="639" height="348" onclick='window.location="/comparing_your_options"' />
<img src="/g/home/slide5.jpg" alt="Join us in Orlando October 10 – 12 for the PCA Annual Conference" width="639" height="348" onclick='window.location="/annual-conference"' />
</div>

CSS

#homeWrapper {
    position:relative;
    margin:0 auto;
    width:951px;
    background: url(../g/home_bg.jpg) no-repeat;
    min-height:888px;
}

#homeSlides {
    position:absolute;
    left:290px;
    top: 143px;
    width:639px;
    height:348px;
    overflow:hidden;
    cursor:pointer;
}

有人以前见过这个或有什么建议吗？

4

1 回答 1

1

我最好的猜测是，这是某种奇怪的比赛条件。在循环插件中，有一个区域可以检查您指定的元素 ( #homeSlides) 是否具有非静态位置。如果没有，循环将应用以下 CSS（宽度和高度值显然特定于您的实现）：

position: relative; width: 639px; height: 348px;

此 CSS 应用于元素的内联样式属性，该属性会覆盖您在样式表中声明的样式。如果你可以让它在 Chrome 中中断，检查一下，#homeSlides你会看到内联样式。禁用内联position: relative;并观察它移动到正确的位置。

您可以通过简单地添加!important到position: absolute;main.css 中的声明来解决此问题。

在循环插件完成初始化后，您也可以通过在 javascript 中将位置设置为绝对来修复它。

编辑：

看看这个问题。您应该删除该重要声明并在所有脚本之前包含所有 CSS 文件。该脚本在 CSS 有时间应用之前执行。

于 2012-04-17T18:59:45.297 回答