問題をもう少しよく理解したいという理由だけで、この質問をするつもりです。
大量の HTML フォームを生成する大量のレガシー JSP コードを含むページに取り組んでおり、テーブルを使用して表示可能な入力フィールドを保持しています。ただし、多くの場合、JSP は非表示の入力を無効な HTML 構造<table>の内部ではなく内部でレンダリングしています。<td>この種の HTML 構造エラーは、このページのいたるところにあります。
このページの JSP コードは、おそらく 10 年間、この無効な HTML に関する問題は発生していません。開発者はこの問題をよく認識していますが、修正する理由はありませんでした。現在、ページをよりモダンに見せようとしており、使用しているものの 1 つは position:fixed です。
とにかく - ここで問題を示すために、非常に単純な HTML ページを示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head><style>.fixedTable { position: fixed; background-color:red; } </style></head>
<body>
<!-- this table gets an invalidly placed hidden input tag outside of the row -->
<table class="fixedTable" style="top:100px;left:100px;">
<input type="hidden" name="value" value="test">
<tr><td>Test 1</td></tr>
</table>
<!-- this table is properly structured -->
<table class="fixedTable" style="top:130px;left:100px;">
<tr><td><input type="hidden" name="value" value="test">Test 2</td></tr>
</table>
</body>
</html>
すべてのブラウザー (IE 7 を除く) では、上から 100 ピクセル、左から 100 ピクセルの位置に 2 つの小さな赤いボックスが重なって表示されます。
IE 7 は、最初のテーブル (テスト 1) の位置を完全に間違えて、ページの左上に配置します。IE8で大丈夫です。
ここで何が起こっているのですか？
確かに、HTML 構造を修正することはできますが、何が起こっているのかを知りたいので、大量の JSP コードをリファクタリングすることなく回避策を見つけられるかもしれません。
混乱を増すために...
スタイルに小さな変更を加える:
.fixedTable td { position: relative }
テキスト「Test 1」が正しい場所に表示されます...しかし、赤い背景はまだ左上隅にあります...
また、ばかげているように思えるかもしれませんが、当社は IE 7 を公式にサポートしており、かなりの割合で IE 7 を使用しています。残念ながら、時代遅れの IT ポリシーを使用している多くの大企業のお客様と取引しています。