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

Node.js erstellt ein einfaches Crawler-Case-Tutorial

Vorbereitung Zuerst müssen Sie nodejs herunterlad...

CSS-Isolationsproblem in Blazor

1. Umwelt VS 2019 16.9.0 Vorschau 1.0 .NET SDK 5....

CocosCreator ScrollView-Optimierungsreihe: Frame-Laden

Inhaltsverzeichnis 1. Einleitung 2. Analyse des f...

Tutorial zur Installation von MySQL8 unter Linux CentOS7

1. Installation der RPM-Version Überprüfen Sie, o...

HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten

Heute werden wir einen einfachen Herzschlageffekt...

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

Vor kurzem hatte ich zufällig Kontakt mit dem Pro...

Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset

Apache Superset ist ein leistungsstarkes BI-Tool,...

Tutorial zur Verarbeitung statischer Ressourcen in Tomcat

Vorwort Alle Anfragen in Tomcat werden von Servle...

Detaillierte Erklärung des Kopierobjekts von jQuery

<!DOCTYPE html> <html lang="de"...

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

Theoretisch entspricht der von MySQL verwendete S...

So verwenden Sie nginx, um eine angegebene Schnittstelle (URL) zu blockieren

1. Einleitung Manchmal müssen Sie eine Servicesch...

Detaillierte Erklärung des CSS3-Rotationswürfelproblems

3D-Koordinatenkonzept Wenn sich ein Element dreht...

Einführung in den CSS BEM-Benennungsstandard (empfohlen)

1 Was ist der BEM-Namensstandard Bem ist die Abkü...

CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial

Die meisten Leute kompilieren MySQL und legen es ...