テーブルの行要素が折れ曲がる不具合

以下はその例です。コードは以下のように非常にシンプルです。

そのため、2行2列の表は、どのブラウザでもエラーなく表示されます。しかし、以下のようなcssを追加すると、状況が変わってきます。

何か問題が起きているように見えますが、この時点では表面上は問題ありません、ページレイアウトは間違いなく乱れていませんのでご安心ください。
重なっているものは見えません。
表面的には問題が見えないけれど、誰かを騙すつもりはなかったんだ。でも、さあ、ie開発ツールを使って、どんなレイアウトがもたらされるのか、教えてもらおう。

2つの画像の違いと共通点に注目してください。左のビューで青い丸で囲ったものに注目してください。このツールの目的は、右側の要素をクリックすると、ページ内にワイヤーで枠が作られることです。
しかし、私は2つの異なる要素を2回クリックしたことに注目してください。しかもワイヤーフレームは同じ場所です（汗）読み方あってるかな？
そう、つまり2つのtrが重なっているのですが、不思議なことにtrの中の要素は正しくレンダリングされ、見た目には何の影響も与えません。こんなことして大丈夫なのかと思うなかれ、大丈夫なんです。
実は、モックアップ ウィンドウの作成中にこの問題に遭遇しました。2 行のテーブルを使用し、1 行目をウィンドウのタイトル バーに、2 行目をメイン ビューにドラッグできるようにしましたが、テーブルの 2 行目が 1 行目を覆っていることに気付き、見た目は正常なのに、タイトル バーをクリックしたりドラッグしたりするのがブロックされました。
これを解決するために、trから位置を削除します。
3. これより
cssを書くときに、最初にある程度リセットして書くかどうかはわかりませんが、私はそうしていますし、NetBeansのcssテンプレートにリセットを保存しているので、各cssファイルにはヘッダーにこの段落が表示されることになります。

ある要素を絶対的に配置するには、まずその親要素をposition:relativeに設定するなどして、要素を絶対的に、次にtop、leftと配置する必要があることは、誰もが知っていることでしょう。
そこで、これは面倒なので、すべての要素にposition:relativeを設定し、絶対位置指定したい要素にはposition:absoluteを変更することにしようと思いました。
で、この記事の問題は、すべての要素にposition:relativeを設定するとテーブルがおかしくなるので、よくないし、他のレンダリングの問題も発生するので、そうしないようにと書いてあるところを何度か見た覚えがあります。
この記事は本当はレイアウトの話をしたいのですが、この問題は確かにレイアウトの問題ではなくieのバグなので、次回また遭遇した時にレイアウトの話をしたいと思います。ちなみに、このバグは本当に変なバグです。