折りたたまれたテーブル行要素のバグ

例を見てみましょう。コードは次の通り非常にシンプルです。

コードをコピー

コードは次のとおりです。

<表の境界線="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>さっ</td>
</tr>
</テーブル>

したがって、2 行 2 列のテーブルはどのブラウザでも正しく表示されます。ただし、次の CSS を追加すると状況は変わります。

コードをコピー

コードは次のとおりです。

<スタイル>
tr{位置: 相対;}
</スタイル>

問題があるように見えますが、心配しないでください。実際、現時点では表面からは問題は見えず、ページレイアウトが乱れることもありません。
重なり合うものは一切表示されません。

決してあなたを騙すつもりはありませんでした。表面的には問題はありませんが、IE 開発ツールを使用してレイアウトが何をもたらすかを見てみましょう。
ccc

2 つの画像の違いと類似点に注目してください。左側のビューの青いボックスに注目してください。このツールは、Web ページ上の要素をクリックしたときにその要素の周囲に線を描くために使用されます。
しかし、2 つの異なる要素を 2 回クリックしたことに注目してください。ワイヤーフレームは同じ場所です。ああ、これは間違いです。
はい、つまり、2 つの tr は重なっていますが、奇妙なことに、tr 内の要素は完全に正しくレンダリングされ、外観スタイルには影響しません。これで安全だと思わないでください。この時点で、隠れた危険が潜んでいます。
実際にこの問題に遭遇したのは、シミュレートされたウィンドウを作成していたときです。2 行のテーブルを使用しました。最初の行はドラッグ可能なウィンドウのタイトルバーで、2 行目はメインビューでした。しかし、後でテーブルの 2 行目が最初の行を覆っていることに気付きました。外見上は正常に見えましたが、タイトルバーはブロックされているためクリックもドラッグもできませんでした。
この問題を解決するには、trの位置を削除します
3. つまり:
CSS を書くときに reset を使用してリセットするかどうかはわかりません。とにかく、私はこのようにしています。私の NetBeans の CSS テンプレートには reset があります。各 CSS ファイルの先頭に次のようなセクションがあります。

コードをコピー

コードは次のとおりです。

/*
TODO このサンプルスタイルをカスタマイズする
構文の推奨事項 http://www.w3.org/TR/REC-CSS2/
*/
html、body、div、span、アプレット、オブジェクト、iframe、
h1、h2、h3、h4、h5、h6、p、blockquote、pre、
a、略語、頭字語、アドレス、big、cite、コード、
del、dfn、em、フォント、img、ins、kbd、q、s、samp、
小さい、ストライク、強い、サブ、sup、tt、var、
b、u、i、センター、
dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、
表、キャプション、tbody、tfoot、thead、tr、th、td {
マージン: 0;
パディング: 0;
境界線: 0;
アウトライン: 0;
フォントサイズ: 12px;
垂直位置合わせ: ベースライン;
背景: 透明;

}
体 {
行の高さ: 1;
}
オル、ウル {
リストスタイル: なし;
}
引用ブロック、q {
引用符: なし;
}
ブロック引用:前、ブロック引用:後、
q:前、q:後 {
内容: なし;
}
/* フォーカスを取得した時の要素のスタイル! */
：集中 {
アウトライン: 0;
}
/* 特別なテキストスタイル! */
インス {
テキスト装飾: なし;
}
デル{
テキスト装飾: 取り消し線;
}
/* 細線テーブルスタイル */
テーブル {
境界線の折りたたみ: 折りたたみ;
境界線の間隔: 0;
}

要素を絶対位置に配置するには、まずその親要素を配置する必要があることは誰もが知っています。たとえば、子要素が絶対位置になるように position:relative を設定し、次に上と左の位置を設定します。

そこで、これは面倒すぎるので、すべての要素に対して position:relative を設定してから、絶対配置のために position:absolute を変更したほうがよいと考えました。この方法なら、1 つずつ設定する必要がなく、すべての要素を直接絶対配置できます。

ここで、この記事で言及されている問題が発生します。すべての要素に position:relative を設定したため、テーブルに問題が発生します。したがって、このアプローチは推奨されず、他のレンダリングの問題も発生します。この設定は使用できないというプロンプトがいくつかの場所で表示されたのを覚えています。

この記事はレイアウトに関するものですが、この問題はレイアウトの問題ではなく、IE のバグです。レイアウトについては、次回レイアウトの問題に遭遇したときにお話しします。ちなみに、これは本当に奇妙なバグです。

<<: Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

>>: WeChatミニプログラムのすべてのページがログインされていることを確認する方法