IE7のテキスト領域がマウスオーバーで消える

Question

この大きなデータ入力ページ、つまりdivを使用したテーブルのようなレイアウトがあります。各行には、開閉を切り替えることができるサブ行があります。トグルは、CSS可視性設定を使用してトリガーされます。各「セル」テーブルの隅に小さな画像があります。画像をクリックすると、ポップアップウィンドウが開き、エントリにメモを入力できます。

このポップアップウィンドウには、テキストエリアと一連のチェックボックス、およびボタンがあります（入力タイプ=送信、と思います）。ポップアップは、非表示のdiv内にネストされたiframeです。

IE7では、このノートをiframeで開いてページを下にスクロールすると、ポップアップのtextareaにマウスを重ねると、ポップアップが消えてその下にページコンテンツが表示されます。チェックボックスには、マウスオーバーしたときに下のページも表示されます。

だから、いくつかの異なる修正を試しました。 Z-indexは、これを修正するために使用できると期待していたものでした。そのような運はありません。テキスト領域をプレーンな入力type = textで置き換えようとするかもしれませんが、チェックボックスもこのバグを示すため、1行のテキスト入力もバグの原因になると思われます。

Answer 1

ブロック要素に加えて、IEがhasLayout 続きを読む

Answer 2

hasLayout （別の投稿で言及）をトリガーする最も簡単な方法は、 zoom：1 を追加することです。

IE 6/7の最も馬鹿げた表示の問題をデバッグするとき、時々一時的にダンプすることがあります

* {
    zoom: 1;
}

CSSに

して、何か変更がないか確認します。もしそうなら、要素、要素の親/子などで始まる要素に選択的に追加し始めます。

zoom はIEでのみサポートされているため、かなり「安全」です。ドキュメントに含めるまた、要素の絶対配置など、おかしなことをする必要もなくなります。

Answer 3

正しいZ-Indexは、絶対配置のブロック要素でのみ機能することを覚えている場合。したがって、ポップアップボックスの位置を絶対に設定してから、z-indexを試してください。ポップアップを特定の位置に配置する必要がある場合は、ラッピング要素を相対位置に設定します。私は以前にこの問題に遭遇したことがあり、説明したとおりに解決したと思います。

Answer 4

IE7の入力フィールドとテキストエリアの両方でまったく同じ問題が発生しましたが、幅を指定した場合のみです。

どこから入手したのか覚えていませんが、この解決策を見つけました。それほどエレガントではないかもしれませんが、問題は解決しました。追加するだけです：

filter:alpha(opacity=100)

面倒なフィールドのスタイル属性のCSSへ。