2

これは、Chrome、Firefox、特に Safari で断続的に発生します。IE では確認されていません。スライドショーは通常よりも上から離れて表示されますが、期待どおりに機能します。ハードリフレッシュでより頻繁に発生し、document.read() の問題のように見えます。

ページはこちら: 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サイクル プラグインには、指定した要素 ( ) が静的でない位置にあるかどうかを確認する領域があります。そうでない場合、cycle は次の CSS を適用します (幅と高さの値は明らかに実装に固有です)。

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

この CSS は、スタイルシートで宣言されたスタイルをオーバーライドする要素のインライン スタイル属性に適用されます。Chrome で壊れる場合は、調べる#homeSlidesとインライン スタイルが表示されます。インラインposition: relative;を無効にして、正しい位置に移動するのを確認します。

main.css の宣言に追加!importantするだけで、これを修正できる場合があります。position: absolute;

サイクル プラグインの初期化が完了した後、javascript で位置を絶対に設定することで修正できる場合もあります。

編集：

この質問をチェックしてください。その重要な宣言を削除し、すべてのスクリプトの前にすべての CSS ファイルを含める必要があります。CSS が適用される前に、スクリプトが実行されています。

于 2012-04-17T18:59:45.297 に答える