親要素をはみ出すように配置した要素内のリンクやフォームが機能しない

症状

親要素を相対配置に、子要素を絶対配置にして、子要素のボックスが親要素のボックスをはみ出すように配置したとき、子要素内のリンクやフォームコントロールが機能しなくなる場合がある。

  • Netscape6/7:親要素がインライン要素のとき、子要素内のリンクやフォームは機能しない。
  • Netscape6:子要素のleft, topプロパティに負の値を指定して親要素のボックスからはみ出させたとき、子要素内のリンクやフォームは機能しない。

例示

<div style="position:relative; top:1em; background:aqua;">親
<div style="position:absolute; top:-1em; background:yellow;">
<a href="b019.html">N6で使用不能</a>
</div></div>
<span style="position:relative; top:1em; background:aqua;">親
<span style="position:absolute; top:1em; background:yellow;">
<a href="b019.html">N6/N7で使用不能</a>
</span></span>

2つのリンクがあります。前者はtopプロパティに負の値を指定した場合の例、後者は祖先に相対配置されたインライン要素が存在する場合です。リンクが機能するかを確認してください(:hover擬似クラスで背景色を変えています)。

スクリーンショット

リンク文字列にマウスポインタを乗せたときの反応です。

WinIE6WinIE6.0標準モード

Ns7.1Netscape7.1標準モード

修正状況

Netscape6.2.3、Netscape7.1で不具合の発生を確認しました。

関連記事

スポンサーリンク

Lua Scripting スクリプティングを取る

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る