IE7は、そのdivの子要素をタッチすると失われるdivにホバーします
-
22-07-2019 - |
質問
理論上
div(コンテナ)があり、その上にマウスを置くと、そのdivが表示されます(ドロップダウン)。ドロップダウンにはリンク画像などが含まれており、ドロップダウンからコンテナを離れるとドロップダウンが消えます。
<div id="container">
<div>Hover over me to see extra stuff</div>
<div id="drop-down">
<div>
<img />
</div>
<div>
<a />
<p><span>Info</span><span>More</span></p>
</div>
<img />
</div>
</div>
Heres the jQuery
$('#container').hover(
function(){ $(this).find('#drop-down').addClass('hover'); },
function(){ $(this).find('#drop-down').removeClass('hover'); }
);
ホバー用のCSSはこちら
#container #drop-down {left: -9999px;}
#container .hover {left: 0;}
実践
IE7以外のすべてのブラウザーで完全に機能しますが、ドロップダウンで最初のdivを含むスパンのスパンを強調表示すると、何らかの理由でコンテナーを離れたようにドロップダウンが消えます。
質問
私は3時間近くも頭を壁にぶつけて、関連性はあるが残念ながら運がなかったIE7バグをすべて見つけようとしていました。私はもともと「z-index」の問題だと思っていましたが、実際には下のコンテンツの上に表示されるため、そうではありません(「position:relative; z-index:9999;」を設定して試してみました) pとスパンの両方で)。それ以外は完全に困惑しています。ただし、そのdivの下のアイテム(たとえば、上記の例のイメージタグ)は、pのパディングのスパンをすり抜けた後に問題を引き起こすことを知っています。
さらなる説明: スパンの下にある要素を実行することであることがわかりましたが、それらが表示されていないため、それを修正する方法がわかりません。また、下に「入力」できるdivがある場合でも、その下にある要素は関係ありません。 (つまり、あなたはまだそこにいません)、ホバーを失い、ドロップダウンが消えます。
CSSを作成していないことは知っていますが、これが発生する可能性のある理由は誰でも考えられますか?また、CSSで直接動作するすべてのCSSを無効にしましたが、まだ影響を受けていますが、この問題があります。
他のヒント
IEの古いバージョンで要素が消える原因を見つけました。 これをコピーしてcssに追加します
div { display: inline-block; }
div { display: block; }
これはバグをうまく説明しています。
div { display: inline-block; } div { display: block; }
これは私のために働いた...すごい痛み。