1. Umriss Der obige Stil (die Eigenschaften in den Klammern nach dem Rechted werden nicht durch Kommas getrennt) können in den meisten Browsern ausgeführt werden, können jedoch keine CSS -Überprüfung bestehen, da die Aussage nicht durch Kommas getrennt ist.
Beim Debuggen eines CSS -Problems füge ich häufig Grenzen zum angegebenen Element hinzu, um genau zu sehen, was mit dem Element passiert, und half dabei, die Quelle des Problems zu bestimmen. Dies ist oft effektiv, da es mir eine spezifischere Sichtbarkeit im Layout gibt. Wenn es sich jedoch um ein Element auf Blockebene handelt, kann dies zu einigen Fehlern führen. Das Hinzufügen eines 1px-Randes zu einem beliebigen Element auf Blockebene wirkt sich höchstwahrscheinlich auf das Layout aus, wodurch die Breite dieses Elements ein zusätzliches 2px hinzugefügt wird.
Die Umrisseigenschaft ist eine perfekte Alternative, da sie das Objekt ohne Beeinflussung des Dokumentflusses wiederherstellt. IE6 und IE7 unterstützen jedoch nicht das Umrissattribut, daher kann es nicht zum Debuggen in beiden Browsern verwendet werden.
2. Inherit (Wert)
Es gibt viele Beispiele in der CSS -Entwicklung: "Erben" alle hinzugefügten Eigenschaften seines übergeordneten Elements, indem Sie bestimmte Stile auf einem bestimmten Element einstellen, sodass Sie eine Menge Tastatureingaben vermeiden können.
Dies kann leicht erreicht werden, indem Erk einstellen. Dies kann nützlich sein. Zum Beispiel gibt es beim Umschreiben des Hintergrundattributs oft viele Texte im Attribut (Farbe, URL -Adresse, Ort usw.). Anstatt diese Werte neu zu schreiben, möchten Sie vielleicht nur berücksichtigen, dass die Elemente im Prozess die gleichen Hintergrundeigenschaften wie ihr übergeordnetes Element haben, kann ein Erbewert alles tun - was offensichtlich Tastatureingaben viel spart viel.
Leider werden Erbwerte in IE6 und IE7 (mit Ausnahme von Richtung (Textorientierung) und Sichtbarkeitseigenschaften) nicht unterstützt.
3.. Leere Zellen
Diese Eigenschaft wird nur für Elemente verwendet, deren Tabelle oder "Anzeige" Eigenschaft auf "Tabellenzell" eingestellt ist. Wenn Sie Inhalte in einer Tabelle dynamisch hinzufügen, können Sie auf den leeren Inhalt einer Zelle stoßen, und dann möchten Sie nicht, dass die leere Zelle versteckt ist.
Die Verwendung von "leeren Zellen: Hide" kann dieses Problem lösen, das Zellen, die möglicherweise auftreten können, vollständig versteckt.
Internet Explorer unterstützt das Attribut mit leeren Zellen nicht.
4. Bildunterschrift
Apropos Tabellenattribut, dieses Attribut wird verwendet, um den in der Seitenleiste der Tabelle angezeigten Tabellentitel zu deklarieren. Es akzeptiert vier Werte: oben, unten, links und rechts. Der Internet -Exporer unterstützt diese Eigenschaft nicht, der Titel der Tabelle wird immer oben in der Tabelle in IE6 und IE7 angezeigt.
5. Gegeninkrement / Gegenaufnahme
Bestellte Listen (<ol>) sind sehr bequem, da sie Ihnen den Ärger sparen, inkrementelle Zahlen manuell hinzuzufügen, und Sie können die Abfolge der Listen ändern, ohne die Zahlen zu ändern.
CSS verfügt über die Eigenschaften der Gegeninkrement- und Gegenreden, mit denen Sie automatisch inkrementelle Zahlen auf fast alle HTML-Elemente generieren können, genau wie der Effekt einer geordneten Liste.
Aber IE6, IE7 und sogar Safari (bis Version 3.x) unterstützen diese Eigenschaften nicht. Natürlich unterstützt IE6 nicht: vor Pseudoelementen.
6. min-hohes
Manchmal erfordert das Design oder das Layout einer Website einen Inhaltsbereich mit einer festen Höhe, andernfalls gehen die spezifischen visuellen Effekte verloren gehen. Dies könnte auf einen Gradientenhintergrund, eine eindeutige Dropdown-Liste oder auf einen coolen Glüheffekt von PS zurückzuführen sein. Aber manchmal gibt es viele Inhalte auf der Seite, aber die Seite kann nicht wie erwartet erweitert werden.
Zu diesem Zeitpunkt muss das min-hohe Attribut verwendet werden, da es den Browser angeben kann, die minimale Höhe auf einem bestimmten Element auf Blockebene zu rendern, unabhängig davon, ob die tatsächliche Höhe des Inhalts diese Mindesthöhe erreicht. Wenn der Inhalt dann die Mindesthöhe überschreitet, erweitert sich das Element mäßig.
Das einzige, was Sie mit min-Höhe beachten müssen, ist, dass es in IE6 nicht unterstützt wird. Wir alle wissen, dass IE6 (langsam) die Phase der Geschichte verlässt, aber einige Kunden können ihre Website immer noch bitten, diesen verdammten Browser zu unterstützen.
Aber es ist schön, dass IE6 den Wert der Höhe genauso rendert, wie andere Browser "min-height" rendern, sodass Sie nur einen Hack oder ein unabhängiges Stylesheet für IE6 benötigen, um diesem Element spezifische Stylesheets hinzuzufügen, wird dieses Problem gelöst.
IE6 ignoriert auch Min-Width, Max-Höhe und Max-Breite, aber die oben genannten Methoden sind auch in diesen Eigenschaften möglich.
7.: Schwebe
Technisch gesehen ist Hover nur eine Pseudoklasse, aber sie wird in IE6 nicht unterstützt (unterstützt von IE7 und IE8). Mit der: Hover Pseudo-Klasse können Sie dem Element alle Mausstile hinzufügen. Dies ist sehr nützlich und kann (zumindest in gewissem Maße) mit JavaScript vermeiden.
Wenn Ihre Website jedoch den IE6 vollständig unterstützen muss, insbesondere in China, wo IE6 voller Macht ist, müssen Sie in Betracht ziehen, die Verwendung dieser Pseudo-Klasse zu stornieren . Und wenn dieser Effekt erreicht werden soll, kann es erforderlich sein, JavaScript und zusätzliche Stile zu verwenden.
8. Anzeige
Die Anzeige wird normalerweise auf einen dieser drei Werte eingestellt: Block, Inline und keine. "Dank IE werden andere Werte der Anzeige selten verwendet. Diese Werte umfassen Inline-Block, Tabelle, Inline-Tabelle und Tabellenzell.
Obwohl der IE diese drei grundlegenden Eigenschaften der Anzeige unterstützt, unterstützt er im Grunde keine anderen Eigenschaften.
Tatsächlich ist die Immobilienunterstützung von IE8 für die Anzeige ziemlich vollständig. Für das Inline-Block-Attribut unterstützt IE6/7 jedoch nur Elemente, die selbst inline sind.
Um mehr über die Unterstützung von Display in verschiedenen Browsern zu erfahren, finden Sie dies - Shenfei Note
9. Clip
Dies ist ein interessantes CSS -Attribut, das in besonderen Fällen nützlich ist. Es kann mit unvorhersehbarem, dynamisch erzeugtem Inhalt kombiniert werden. Einfach ausgedrückt, ermöglicht diese Eigenschaft, versteckte Bereiche in einem bestimmten Element anzugeben - sie kann auch als in einem absolut positionierten Element verstanden werden, der Anzeigebereich des Elements wird nach bestimmten Einstellungen geschnitten, und der Inhalt jenseits dieses Bereichs wird versteckt sein.
Technisch gesehen wird das Clip-Attribut von IE unterstützt, unterstützt jedoch nur die Kommas-freie Syntax, wie z.
div.clipped {
Polsterung: 20px;
Breite: 400px;
Höhe: 400px;
Clip: RECT (20px 300px 200px 100px);
Position: absolut;
}
10.: Fokus
Dies ist eine weitere Pseudoklasse, die hier erwähnt werden muss, da alle Nicht-I-Browser diese Eigenschaft unterstützen. Mit dem: Focus Pseudo-Klasse können Sie einen speziellen Stil deklarieren. Dies ist sehr nützlich bei Formularelementen, da Sie einem Eingabefeld bei Auswahl einen Rand hinzufügen können.