4

たとえば、次の DOM 構造を考えてみましょう。

<a href="#" title="The Anchor">
  <img src="http://www.adiumxtras.com/images/thumbs/dango_status_icon_set_7_19047_6248_thumb.png" />
  <span>This is a link</span>
</a>

問題は、This is a linkテキストにカーソルを合わせてもツールヒントが表示されず、画像にカーソルを合わせてもツールヒントが表示されることです。この問題はどこでも発生するわけではありません。つまり、ページに上記のように複数の DOM スニペットがある場合、ホバー時にツールチップが表示されるものと表示されないものがあります。この奇妙な動作は、HTML 4 移行 doctype を使用する IE8 および IE9 でのみ発生します (IE8 および IE9 は、それぞれ IE8 および IE9 標準モードで実行されます)。厳密な doctype を使用すると、この問題はなくなります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

これはとにかくJSに関連していますか？それとも、これを引き起こしている可能性のある DOM の他の何かですか?

stackoverflow でこの問題に関する同様の参照を見つけましたが、これが発生する理由を説明しているものはありません。

HTML リンク タイトル属性 ツールチップ Internet Explorer 8

https://stackoverflow.com/a/7901175/1571437

4

2 に答える 2

8

のspan子であるは、anchor保持するテキストのために最小の高さを持っていますが、IEではアンカー自体の高さはありません。このため、テキストにカーソルを合わせると、ツールチップは表示されません。同じことを確認するには、コンソールで次のコードスニペットを実行します

document.getElementById("element's id").offsetHeight // will return 0

これはIEのバグであり、回避策は次のようなことを行うことです。

a[title] span {
    display: inline-block;
}
于 2012-11-19T07:16:50.650 に答える
1

このコンテキストで私が持っていた IE の謎について少し言及します (IE7 モードの IE9)。title-Tooltips とのリンクにはネストされた div があり、ツールチップが表示されますが、定義に「clear:both」を含むスペーサー div がある場合は表示されません。スペーサーからクリアを取り除いた後、ツールチップが表示されました。以前は、スペーサーの上の行には表示されませんでしたが、スペーサーの下では機能していました。うん。IEの回避策を見つけるために、さらに数時間実験します。

もちろん、clear:both のないスペーサーはうまく機能しません (FF は上記の他のコンテンツの上に配置します..)。最後に、リンク自体ではなく、内側の div に title-atts を配置するのに役立ちました。

于 2013-07-17T15:35:04.290 に答える