Gefaltetes Tabellenzeilenelement bug_HTML/Xhtml_Webseitenproduktion

Nehmen wir ein Beispiel: Der Code ist sehr einfach und lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

Auf diese Weise zeigt eine Tabelle mit zwei Zeilen und zwei Spalten in keinem Browser Fehler an. Wenn ich jedoch das folgende CSS hinzufüge, ist die Situation anders:

Code kopieren


Der Code lautet wie folgt:

Es scheint, dass es ein Problem geben wird, aber keine Sorge, Sie können tatsächlich keine Probleme erkennen an der Oberfläche zu diesem Zeitpunkt, und das Seitenlayout wird definitiv nicht durcheinander gebracht,

Sie können nichts überlappendes sehen

Ich wollte Sie nie täuschen, obwohl es an der Oberfläche kein Problem gibt , aber jetzt kommt unser ie-Entwicklungstool ins Spiel, es wird uns das Layout mitteilen.

Achten Sie darauf Beachten Sie die Unterschiede und Ähnlichkeiten in den beiden Bildern. Etwas, die Funktion dieses Werkzeugs besteht darin, auf ein Element auf der rechten Seite zu klicken und es mit einem Drahtmodell auf der Webseite einzurahmen >Aber beachten Sie, dass ich zwei verschiedene Elemente an derselben Stelle angeklickt habe.
Ja, das heißt, die beiden Tr-Elemente überschneiden sich Ich glaube nicht, dass dies sicher ist. Ich bin zu diesem Zeitpunkt auf dieses Problem gestoßen, als ich eine zweizeilige Tabelle verwendet habe Die erste Zeile ist die Titelleiste des Fensters, die gezogen werden kann, und die zweite Zeile ist die Hauptansicht. Später stellte ich jedoch fest, dass die zweite Zeile der Tabelle die erste Zeile überdeckte. Obwohl sie normal aussah, war die Titelleiste blockiert konnte nicht angeklickt und gezogen werden. Um dieses Phänomen zu beheben, entfernen Sie einfach die Position in tr 3. Aus dieser Sicht: Ich weiß sowieso nicht, ob Sie beim Schreiben von CSS einen Reset verwenden , das ist, was ich mache, das CSS in meinen NetBeans Das Zurücksetzen wird in der Vorlage gespeichert, und im Header jeder CSS-Datei befindet sich ein Absatz wie dieser:


Kopieren Sie den Code


Der Code lautet wie folgt:


/*

TODO passen Sie diesen Beispielstil an

Syntaxempfehlung http:// www.w3.org/TR/REC-CSS2/*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p , Blockzitat, Prä,a, Abbr, Akronym, Adresse, groß, Zitat, Code,

del, dfn, em, Schriftart, img, ins, kbd, q, s, samp,

klein, Strike, Strong, Sub, Sup, TT, Var,

b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thehead, tr, th, td {
margin : 0;
padding: 0;
border: 0;
Outline: 0;
Schriftart -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;
}
/* Der Stil, wenn das Element den Fokus erhält */
:focus {
outline: 0;
}
/* Der Stil von Spezialtext!
/* Tabellenstil mit dünner Linie*/
Tabelle {
border-collapse: Collapse ;
border-spacing: 0;
}


Jeder weiß, dass Sie, wenn Sie ein Element absolut positionieren möchten, zuerst sein übergeordnetes Element positionieren müssen, z. B. eine Position festlegen: relativ, damit das untergeordnete Element absolut sein kann, und dann oben und links positionieren müssen
Also dachte ich, das ist zu mühsam, ich könnte genauso gut position:relative für alle Elemente festlegen und dann position:absolute für absolute Positionierung ändern. Auf diese Weise muss ich sie nicht einzeln festlegen. und alle Elemente können absolut positioniert werden.

Daher tritt das in diesem Artikel erwähnte Problem auf: position:relative für alle Elemente, daher liegt ein Problem mit der Tabelle vor, daher ist dieser Ansatz nicht ratsam Ich erinnere mich, dass ich an mehreren Stellen Aufforderungen gesehen habe, dass diese Einstellung nicht möglich ist.

In diesem Artikel geht es tatsächlich um das Layout, aber dieses Problem ist tatsächlich ein Fehler im IE, kein Layout Das nächste Mal werde ich auf das Problem stoßen. Reden wir über das Layout. Das ist übrigens ein seltsamer Fehler.