0

JQueryサイクルプラグインを使用して切り替える写真の上に「ホバー」する必要がある小さなdivの使用に問題があります。写真の幅は 950px で、写真の右上にある小さなボックスに最新のニュースが表示されます。

問題は IE の互換性モードにあります。ボックスは z-index を失っているように見え、画像の後ろになってしまいます。IE8、Opera、Chrome、Firefox で動作します。

2枚の写真を削除しようとしたので、1枚の写真しか表示されず、何らかの理由で互換モードでも機能します。img タグ間の空白を削除しようとしましたが、うまくいきません。margin: 0; パディング: 0 全体が運がない

誰が何が間違っているのか考えましたか?

CSS コード

#Content {
    width: 950px;   
}
#NewsWrapper {
    position: relative;
    padding: 0;
    margin: 0;
    top: 0;
}
#NewsListning {
    float: right;
    height: 200px;
    margin: 0;
    padding: 10px;
    background: yellow;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 12;
    width: 300px;
}
#SlideImages {
    width: 100%;
    margin: 0; 
    padding: 0; 
    float: left; 
    z-index: 11;
}
.SlideImage {
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
    z-index: 11;
}

JavaScript コード

$(function () {
  $('#SlideImages').cycle({
    fx: 'fade',
    speed: 5000
  });
});

HTML コード

<div id="Content">
<div id="SlideImages">
    <img src="/Images/Slide1.jpg" class="SlideImage" />
    <img src="/Images/Slide2.jpg" class="SlideImage" />
    <img src="/Images/Slide3.jpg" class="SlideImage" />
</div>

<div id="NewsWrapper">
  <div id="NewsListning">
    <div>
      <strong>Test 2</strong> 
      Lorem ipsum
    </div>
  </div>
</div>
  • 解決済み - 追加メモ*

IE7 を除くすべてのブラウザーでは、たとえば、top: 0; を指定する必要があります。left:0 position: absolute を使用する場合。それ以外の場合は、通常、サイトの右側で終了します。IE7に関しては、もう1つ意味がありません。

4

1 に答える 1

1

#NewsWrapper を #NewsListing よりも高いインデックスとして配置します

それはうまくいくはずです

また、Cycle のコードは見ていませんが、12 よりも高い z-index を使用していると思います。おそらくz-index、画面上で最も前方に表示したいものには > 1000 を使用することをお勧めします。

同様の問題で本当に苦労しました。(バナーの下にある CSS ドロップダウン) CSS を使用して最終的に修正し、divナビゲーション全体の親ホールposition:absoluteを非常に高く変更しましたが、これz-indexをテストしたところ、非常にうまく機能しました。

于 2011-03-14T16:43:53.317 に答える