Ich habe zusammengefasst, wie CSS verwendet werden, um den Grenzhell und den dunklen Effekt von Tischgrenze + BorderColordark + BorderColorlight zu erreichen. Dann fragte mich ein Internetnutzer, warum er einen ähnlichen CSS -Stil geschrieben hat, aber er konnte nur den Grenzeffekt der Tabelle unter der Oper sehen, und es gab nichts unter dem IE.
Ich stieg von Opera9 aus und sah, dass es in der Tat der Fall war. Der Grund ist nicht kompliziert: Denn unter IE (Firefox scheint mit dem IE übereinstimmen), wenn der Inhalt eines TD leer ist, auch wenn Sie die Höhe und Breite festlegen, wird der Grenzstil dieser Zelle nicht angezeigt. Opera verwendet den Stil, um zu rendern, unabhängig davon, ob Inhalte vorhanden sind oder nicht. Diese Frage wurde beim Abschluss des Abschlusses angetroffen. Der Abteilungsleiter kam zu diesem Zeitpunkt, um mich zu fragen, und später sagte ich ihm: Fügen Sie es einfach jedem leeren TD hinzu. Jedes Mal, wenn ich in Zukunft dieses Problems begegne, werde ich diese einfache, grobe und effektive Methode verwenden, um es zu lösen.
Aber heute habe ich mein Bestes versucht, es ein paar Mal zu studieren, und von Jarry wusste ich, dass die CSS-Syntax es uns ermöglichte, diese Standardverhalten zu ändern: Verwendung von Grenzkollaps: Zusammenbruch; und leere Zellen: Show; Um die verschwundene Grenze erscheinen zu lassen.
class = test1: Randkollapse hinzufügen: Zusammenbruch;
.Test1 {
Grenze: 1PX Solid #999999;
Grenzkollapse: Zusammenbruch;
Breite: 60%
}
.Test1 td {
Border-Bottom: 1PX Solid #999999;
Höhe: 28px;
Padding-Links: 6PX;
}
Klasse1 gibt es Inhalte hier
Hier gibt es Inhalte
class = test2: Randkollapse hinzufügen: Zusammenbruch; und leere Zellen: Show;
.Test2 {
Grenze: 1PX Solid Black;
Grenzkollapse: Zusammenbruch;
Breite: 60%
}
.Test2 td {
Grenzboden: 1PX Solid Black;
Höhe: 28px;
Padding-Links: 6PX;
leere Zellen: Show;
}
Klasse2 hat Inhalte hier
Hier gibt es Inhalte
class = test3: ohne Grenzkollapse: Zusammenbruch; und leere Zellen: Show;
.Test3 {
Grenze: 1PX Solid #999999;
Breite: 60%
}
.Test3 td {
Border-Bottom: 1PX Solid #999999;
Höhe: 28px;
Padding-Links: 6PX;
}
Klasse 3 hat Inhalte hier
Hier gibt es Inhalte