折り畳まれた表の行要素のバグ_HTML/Xhtml_Web ページの作成

例を見てみましょう。コードは次のように非常に単純です。

コードをコピーします

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

dd

s

このように、2 行 2 列のテーブルはどのブラウザでもエラーを表示しません。しかし、次の CSS を追加すると、状況は異なります。 >

コードをコピーします

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

問題が発生するように見えますが、実際には問題は見当たりませんので、ご安心ください。

表面上は問題ありませんが、決して騙されたくありません。 , しかし、今度は ie 開発ツールを使用してみましょう。レイアウトが表示されます。

に注目してください。 2 つの写真の違いと類似点に注目してください。左側のビューの青い線の円に注目してください。このツールの機能は、右側の要素をクリックすると、Web ページ内でワイヤーフレームで囲まれることです。
ただし、2 つの異なる要素を 2 回クリックしたことに注意してください。ワイヤーフレームは同じ場所に配置されています。はい、つまり 2 つの tr は重なっていますが、奇妙なことに tr 内の要素が重なっています。外観スタイルに影響を与えることなく、完全に正しくレンダリングされます。この時点では、隠れた危険性は存在しません。実際に 2 行のテーブルを使用したときに、この問題が発生しました。最初の行はドラッグできるウィンドウのタイトルバーで、2行目はメインビューを作成します。しかし、後でテーブルの2行目が最初の行を覆っていることがわかりました。見た目は正常ですが、タイトルバーがブロックされていました。 この現象を修正するには、tr の位置を削除するだけです。 3. この観点から: CSS を記述するときにリセットを使用するかどうかはわかりません。 、これが私の NetBeans の CSS です。リセットはテンプレートに保存され、各 CSS ファイルのヘッダーに次のような段落があります:




コードをコピーします


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

/* このサンプル スタイルをカスタマイズする TODO 構文の推奨事項 http:// www.w3.org/TR/REC-CSS2/*/html、body、div、span、アプレット、オブジェクト、iframe、

h1、h2、h3、h4、h5、h6、p 、blockquote、pre、

a、abbr、頭字語、アドレス、big、cite、code、

del、dfn、em、font、img、ins、kbd、q、s、samp、
small、 Strike、strong、sub、sup、tt、var、
b、u、i、center、
dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、
table, caption, tbody, tfoot, thead, tr, th, td {
マージン : 0;
パディング: 0;
ボーダー: 0;
アウトライン: 0;
フォント-size: 12px;
vertical-align:baseline;
background:transparent;

}
body {
line-height: 1;
}
ol 、ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q: before, q:after {
content: none;
}
/* 要素がフォーカスを取得したときのスタイル */
:focus {
アウトライン: 0;
}
/* 特殊なテキストのスタイル */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 細線テーブル スタイル*/
table {
border-collapse: Collapse ;
border-spacing: 0;
}


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

そこで、これは面倒なので、すべての要素にposition:relativeを設定してから、position:absoluteを絶対位置に変更するほうがよいのではないかと思いました。こうすることで、要素を1つずつ設定する必要がなくなります。

したがって、この記事で説明した問題が発生します。すべての要素に対してposition:relativeを設定しているため、テーブルに問題があるため、このアプローチはお勧めできません。

この記事は実際にはレイアウトに関するものですが、この問題はレイアウトではなく、IE のバグです。次回はレイアウトの問題に遭遇します。ところで、これは本当に奇妙なバグです。