Fehler beim reduzierten Tabellenzeilenelement

Fehler beim reduzierten Tabellenzeilenelement
Nehmen wir ein Beispiel: Der Code ist sehr einfach und lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Tabellengrenze="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</Tabelle>

Somit wird eine Tabelle mit zwei Zeilen und zwei Spalten in jedem Browser korrekt angezeigt. Wenn ich jedoch das folgende CSS hinzufüge, sieht die Situation anders aus:

Code kopieren
Der Code lautet wie folgt:

<Stil>
tr{position: relative;}
</Stil>

Es scheint, als gäbe es ein Problem, aber keine Sorge, tatsächlich können Sie zu diesem Zeitpunkt oberflächlich betrachtet kein Problem erkennen und das Seitenlayout wird definitiv nicht durcheinander geraten.
Sie werden keine Überlappungen sehen.

Ich wollte Sie nicht täuschen. Obwohl es oberflächlich betrachtet kein Problem gibt, lassen Sie uns mithilfe des IE-Entwicklungstools herausfinden, was das Layout bringt.
ccccccc
Beachten Sie die Unterschiede und Ähnlichkeiten zwischen den beiden Bildern. Beachten Sie das blaue Kästchen in der linken Ansicht. Das Tool wird verwendet, um eine Linie um ein Element auf der Webseite zu zeichnen, wenn Sie darauf klicken.
Aber beachten Sie, dass ich zweimal auf zwei verschiedene Elemente geklickt habe. Das Drahtgitter ist an derselben Stelle. Oh mein Gott, ich sehe nichts.
Ja, das heißt, die beiden tr überlappen sich, aber das Seltsame ist, dass die Elemente in tr völlig korrekt gerendert werden und keinen Erscheinungsbildstil beeinflussen. Denken Sie nicht, dass dies sicher ist, zu diesem Zeitpunkt sind versteckte Gefahren verborgen.
Dieses Problem ist mir tatsächlich begegnet, als ich ein simuliertes Fenster erstellt habe. Ich habe eine zweizeilige Tabelle verwendet. Die erste Zeile war die Fenstertitelleiste, die gezogen werden konnte, und die zweite Zeile war die Hauptansicht. Später stellte ich jedoch fest, dass die zweite Zeile der Tabelle die erste Zeile überdeckte. Obwohl sie von außen normal aussah, konnte die Titelleiste nicht angeklickt oder gezogen werden, da sie blockiert war.
Um dieses Problem zu beheben, entfernen Sie die Position in tr
3. Also:
Ich weiß nicht, ob Sie beim Schreiben von CSS Reset verwenden. Jedenfalls mache ich es so. Die CSS-Vorlage in meinen NetBeans wurde zurückgesetzt. Am Anfang jeder CSS-Datei gibt es einen Abschnitt wie diesen:

Code kopieren
Der Code lautet wie folgt:

/*
TODO: Passen Sie diesen Beispielstil an
Syntaxempfehlung http://www.w3.org/TR/REC-CSS2/
*/
html, Body, Div, Span, Applet, Objekt, Iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abk, akronym, adresse, bedeutung, code, e-mail,
del, dfn, em, Schriftart, img, ins, kbd, q, s, samp,
klein, streik, stark, sub, sup, tt, var,
b, u, i, Mitte,
dl, dt, dd, ol, ul, li,
Feldsatz, Formular, Beschriftung, Legende,
Tabelle, Beschriftung, tbody, tfoot, thead, tr, th, td {
Rand: 0;
Polsterung: 0;
Rand: 0;
Umriss: 0;
Schriftgröße: 12px;
vertikale Ausrichtung: Grundlinie;
Hintergrund: transparent;

}
Körper {
Zeilenhöhe: 1;
}
ol, ul {
Listenstil: keiner;
}
blockquote, q {
Zitate: keine;
}
blockquote:vorher, blockquote:nachher,
q:vorher, q:nachher {
Inhalt: keiner;
}
/* Der Stil des Elements, wenn es den Fokus erhält! */
:Fokus {
Umriss: 0;
}
/* Spezieller Textstil! */
ins {
Textdekoration: keine;
}
del {
Textdekoration: durchgestrichen;
}
/* Tabellenstil mit dünnen Linien */
Tisch {
Rahmen-Zusammenbruch: Zusammenbruch;
Rahmenabstand: 0;
}

Jeder weiß, dass man zum absoluten Positionieren eines Elements zuerst sein übergeordnetes Element positionieren muss, z. B. durch Festlegen einer relativen Position, damit das untergeordnete Element absolut sein kann, und dann die obere und linke Position.

Also dachte ich, das ist zu viel Aufwand, 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 direkt absolut positioniert werden.

Hier kommt also das in diesem Artikel erwähnte Problem. Wir setzen position:relative für alle Elemente, daher hat die Tabelle Probleme. Dieser Ansatz ist also nicht ratsam und wird einige andere Rendering-Probleme verursachen. Ich erinnere mich, an mehreren Stellen Hinweise gesehen zu haben, dass diese Einstellung nicht verwendet werden kann.

In diesem Artikel geht es eigentlich um das Layout, aber dieses Problem ist tatsächlich ein Fehler im IE und kein Layoutproblem. Ich werde das nächste Mal über das Layout sprechen, wenn ich auf ein Layoutproblem stoße. Das ist übrigens ein wirklich seltsamer Fehler.

<<:  So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx

>>:  So stellen Sie sicher, dass auf jeder Seite des WeChat Mini-Programms eine Anmeldung erfolgt

Artikel empfehlen

Detaillierte Verwendung des Vue More Filter-Widgets

In diesem Artikelbeispiel wird die Implementierun...

Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

1. Einleitung Die EXPLAIN-Anweisung liefert Infor...

Vue realisiert den Logistik-Timeline-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

Erweiterte Erklärung der Javascript-Funktionen

Inhaltsverzeichnis Funktionsdefinitionsmethode Fu...

Einfache Schritte zum Erstellen eines MySQL-Containers mit Docker

Vorwort Wir haben Docker bereits installiert und ...

Implementieren von Rechnerfunktionen mit dem WeChat-Applet

Dieser Artikel ist ein einfacher Rechner, der mit...

Detaillierte Erklärung des Ungültigkeitsprozesses des VUE-Tokens

Inhaltsverzeichnis Ziel Gedankenanalyse Code-Land...

Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx

Inhaltsverzeichnis Proxy-Weiterleitungsregeln Der...

Analyse des Ereignisschleifenmechanismus von js

Vorwort Wie wir alle wissen, ist JavaScript im Ke...

CSS3-Implementierungsbeispiel zum Drehen nur des Hintergrundbildes um 180 Grad

1. Mentale Reise Als ich kürzlich das Cockpit sch...

MySQL 5.7 Installations- und Konfigurations-Tutorial unter CentOS7 64 Bit

Installationsumgebung: CentOS7 64-Bit-Mini-Versio...

Erfahren Sie, wie Sie mit Webpack TypeScript-Code verpacken und kompilieren

TypeScript-Bündelung Webpack-Integration Normaler...