3

IE9に問題があります。.photo-nav にカーソルを合わせると、.photo-nav-icon が表示されるはずです。これは、私が試した他のすべてのブラウザーで正常に機能します。

ここに私のマークアップがあります：

<div class="photo-content">
    <img class="photo-img" src="/Images/empty.gif" />
    <div class="photo-nav prev" data-direction="prev">
        <div class="photo-nav-icon prev"></div>
    </div>
    <div class="photo-nav next" data-direction="next">
        <div class="photo-nav-icon next"></div>
    </div>
</div>

そして、ここに私のCSSがあります:

.photo-content { position: relative; width: 600px; height: 400px; margin: 0 auto; }
.photo-img { width: 600px; height: 400px; display:block; }
.photo-nav { position: absolute; height: 400px; width: 72px; }
.photo-nav.prev { top: 0; left: 0; }
.photo-nav.next { top: 0; right: 0; }
.photo-nav-icon { height: 60px; width: 60px; display: none; }
.photo-nav-icon.prev { margin: 170px 0 0 10px; }
.photo-nav-icon.next { background-position: 0 -60px; margin: 170px 10px 0 0; }
.photo-nav:hover > .photo-nav-icon { display: block; }

これが問題のフィドルです。

ご注意ください; Fiddle の境界線はデザインの一部ではありません。画像が利用できないため、フレームワークを表示するためだけに存在します。ただし、興味深いことに、IE はフォト ナビゲーション div の境界線を認識し、ホバーに反応しますが、div の本体には反応しません。

もう 1 つの注意: img を div に変更し、代わりに background-image を使用すると、IE は正しく動作するように見えますが、背景画像の onload イベントをフックする方法を知らない/認識できないため、他の問題が発生します。

最後に、doctype は<!DOCTYPE html>

4

2 に答える 2

1

.photo-nav に背景 (例: rgba(0,0,0,0.25)) を指定すると機能しますが、理由はわかりません。おそらく z-index の問題だと思いましたが、.photo-nav にz-index > 0 はここでは役に立ちません。

IE は境界線上のマウスのみを検出します。それ以外の場合は、マウスがフォトナビ上にないと考えているようです - JS マウス リスナー関数と同じ扱いです。

したがって、それを機能させるものは次のとおりです。

a) .photo-nav 要素に背景を与えます。b) .photo-content から position:relative を削除

于 2013-05-04T14:57:55.593 に答える