1. Gliederung
Beim Debuggen von CSS-Problemen füge ich häufig einen Rahmen zu einem bestimmten Element hinzu, um genau zu sehen, was mit diesem Element passiert, und um die Ursache des Problems zu ermitteln. Das funktioniert oft, weil ich dadurch eine genauere Sicht auf das Layout habe. Wenn es sich jedoch um ein Element auf Blockebene handelt, kann etwas schiefgehen. Das Hinzufügen eines 1-Pixel-Rahmens zu einem Element auf Blockebene wirkt sich wahrscheinlich auf das Layout aus, indem das Element um 2 Pixel breiter wird.
Die Eigenschaft „outline“ ist ein perfekter Ersatz, da sie das Objekt rendert, ohne den Fluss des Dokuments zu beeinträchtigen. Allerdings unterstützen IE6 und IE7 das Outline-Attribut nicht, sodass es in diesen beiden Browsern nicht zum Debuggen verwendet werden kann.
2. Erben (Wert)
In der CSS-Entwicklung gibt es dafür viele Beispiele: Indem Sie bestimmte Stile für ein bestimmtes Element festlegen, um diesem Element mitzuteilen, dass es alle hinzugefügten Eigenschaften seines übergeordneten Elements „erben“ soll, können Sie eine erhebliche Menge an Tastatureingaben vermeiden.
Dies kann leicht durch die Einstellung inherit erreicht werden. Dies kann nützlich sein. Wenn Sie beispielsweise das Hintergrundattribut überschreiben, enthält das Attribut häufig viel Text (Farbe, Bild-URL, Standort usw.). Anstatt diese Werte neu zu schreiben, möchten Sie möglicherweise einfach, dass das betreffende Element dieselbe Hintergrundeigenschaft wie sein übergeordnetes Element hat. Ein inherit-Wert reicht aus und erspart Ihnen natürlich viel Tastatureingabe.
Leider werden Erbwerte in IE6 und IE7 nicht unterstützt (mit Ausnahme der Richtungs- (Textrichtung) und Sichtbarkeitseigenschaften).
3. Leere Zellen
Dieses Attribut wird nur für Tabellen oder Elemente verwendet, deren „display“-Attribut auf „table-cell“ gesetzt ist. Wenn Sie einer Tabelle dynamisch Inhalte hinzufügen, kann es vorkommen, dass der Inhalt einer bestimmten Zelle leer ist und Sie nicht möchten, dass der Rahmen, die Hintergrundfarbe, das Hintergrundbild usw. dieser leeren Zelle ausgeblendet werden.
Die Verwendung von „empty-cells: hide“ kann dieses Problem lösen, indem die Zellen, in denen diese Situation auftreten kann, vollständig ausgeblendet werden.
Internet Explorer unterstützt das Attribut „leere Zellen“ nicht.
4.Beschriftungsseite
Apropos Tabellenattribut: Dieses Attribut wird verwendet, um den Tabellentitel zu deklarieren, der in der Seitenspalte der Tabelle angezeigt wird. Es akzeptiert vier Werte: oben, unten, links und rechts. Internet Exporer unterstützt dieses Attribut nicht. Der Tabellentitel wird in IE6 und IE7 immer oben in der Tabelle angezeigt.
5. Zähler-Inkrementierung/Zähler-Reset
Eine geordnete Liste (
) ist sehr praktisch, da sie Ihnen die Mühe erspart, aufsteigende Zahlen manuell hinzuzufügen, und es Ihnen ermöglicht, die Reihenfolge der Liste zu ändern, ohne die Zahlen zu ändern.
CSS verfügt über die Eigenschaften „Counter-Inkrement“ und „Counter-Reset“, mit denen Sie automatisch aufsteigende Zahlen für fast jedes HTML-Element generieren können, ähnlich einer geordneten Liste.
Aber IE6, IE7 und sogar Safari (bis Version 3.x) unterstützen diese Eigenschaften nicht. Natürlich unterstützt IE6 auch nicht das Pseudoelement :before.
6.Mindesthöhe
Manchmal erfordert das Design oder die Layoutstruktur einer Website einen Inhaltsbereich mit einer festen Höhe, da sonst eine bestimmte visuelle Wirkung verloren geht. Dies kann an einem Hintergrund mit Farbverlauf, einer einzigartigen Dropdown-Liste oder vielleicht an einem coolen Leuchteffekt von Photoshop liegen. Aber manchmal gibt es zwar viel Inhalt auf der Seite, die Seite lässt sich aber nicht wie erwartet erweitern.
Zu diesem Zeitpunkt müssen Sie das Attribut „min-height“ verwenden, da es den Browser anweisen kann, die Mindesthöhe für ein bestimmtes Element auf Blockebene darzustellen, unabhängig davon, ob die tatsächliche Höhe des Inhalts diese Mindesthöhe erreicht. Wenn der Inhalt dann die Mindesthöhe überschreitet, wird das Element entsprechend erweitert.
Das Einzige, was bei der Verwendung von min-height zu beachten ist, ist, dass es in IE6 nicht unterstützt wird. Wir alle wissen, dass IE6 (langsam) ausstirbt, aber einige Kunden verlangen möglicherweise immer noch, dass ihre Websites den verdammten Browser unterstützen.
Die gute Nachricht ist, dass IE6 den Höhenwert genauso wiedergibt, wie andere Browser „min-height“ rendern. Sie benötigen also nur einen IE6-spezifischen Hack oder ein eigenständiges Stylesheet, um eine bestimmte Höhe hinzuzufügen, und das Problem ist gelöst.
IE6 ignoriert auch min-width, max-height und max-width, aber die obige Methode ist auch für diese Eigenschaften machbar.
7. :schweben
Technisch gesehen ist :hover nur eine Pseudoklasse, wird jedoch in IE6 nicht unterstützt (IE7 und IE8 unterstützen sie). Mit der Pseudoklasse :hover können Sie einem Element einen beliebigen Mouseover-Stil hinzufügen. Dies ist sehr nützlich und vermeidet (zumindest teilweise) die Verwendung von JavaScript.
Wenn Ihre Website jedoch IE6 vollständig unterstützen muss, insbesondere in China, wo IE6 vorherrscht, müssen Sie erwägen, die Verwendung dieser Pseudoklasse abzubrechen, es sei denn, das relevante Tag verfügt über ein „href“-Attribut, wie z. B. das -Tag . Und wenn Sie diesen Effekt erzielen möchten, müssen Sie möglicherweise auf Javascript und zusätzliche Stile zurückgreifen.
8.Anzeige
Die Anzeige wird normalerweise auf einen dieser drei Werte eingestellt: Block, Inline und Keine. „Dank“ des IE werden andere Anzeigewerte selten verwendet. Zu diesen Werten gehören Inline-Block, Tabelle, Inline-Tabelle und Tabellenzelle usw. Diese Attribute sind sehr nützlich, um einige spezielle Layoutprobleme zu lösen.
Obwohl der IE diese drei grundlegenden Eigenschaften von Display unterstützt, unterstützt er daher grundsätzlich keine anderen Eigenschaften.
Tatsächlich ist die Unterstützung für Anzeigeattribute durch IE8 recht vollständig. Allerdings unterstützt IE6/7 für das Inline-Block-Attribut nur Elemente, die selbst inline sind.
Weitere Informationen zur Display-Unterstützung in verschiedenen Browsern finden Sie hier – Shenfei Note
9. Clip
Dies ist eine interessante CSS-Eigenschaft, die in besonderen Situationen nützlich sein kann. Es kann mit unvorhersehbaren, dynamisch generierten Inhalten kombiniert werden. Einfach ausgedrückt ermöglicht dieses Attribut die Angabe eines verborgenen Bereichs auf einem bestimmten Element. Es kann auch so verstanden werden, dass bei einem absolut positionierten Element der Anzeigebereich des Elements entsprechend bestimmten Einstellungen und dem Inhalt zugeschnitten wird darüber hinausgehende Bereiche werden ausgeblendet.
Technisch gesehen wird das Clip-Attribut vom IE unterstützt, unterstützt jedoch nur eine kommafreie Syntax, z
div.clipped {
Polsterung: 20px;
Breite: 400px;
Höhe: 400px;
Clip: rect(20px 300px 200px 100px);
Position: absolut;
} Der obige Stil (die Attribute in Klammern nach rect werden nicht durch Kommas getrennt) kann in den meisten Browsern ausgeführt werden, besteht jedoch möglicherweise keine CSS-Validierung, da die Anweisungen nicht durch Kommas getrennt sind.
10. :fokus
Dies ist eine weitere Pseudoklasse, die hier erwähnt werden muss, da alle Nicht-IE-Browser dieses Attribut unterstützen. Mit der Pseudoklasse :focus können Sie einen speziellen Stil deklarieren, der dynamisch auf ein Seitenelement angewendet wird, wenn es in den Tastatur-(Maus-)Fokus gelangt. Dies ist bei Formularelementen nützlich, da Sie einem Eingabefeld einen Rahmen hinzufügen können, wenn es ausgewählt ist.
