Cascading Style Sheets ::Schnellreferenz

CSS 2.1: Visuelle Formatierung und Effekte

Eigenschaft

Browser-Support

width
Firefox, Camino, Mozilla etc.
Wenn ein Prozentwert deklariert wurde, vererbt die Gecko-Engine den deklarierten Wert, nicht den daraus resultierenden berechneten Wert.
IE 7
IE/Win verebt zwar keine Prozentwerte, kann aber nicht den Wert inherit erkennen.

TOP

min-width, max-width
IE 7
IE/Win 7 missachtet min-width, wenn gleichzeitig überbreite margins und width:auto gegeben ist. Umgekehrt ist aber die Darstellung von max-width bei zu schmalen margins in Ordnung.
IE/Win 5.5, IE/Win 6
IE/Win bis Version 6 erkennt beide Eigenschaften nicht.
IE/Mac 5.5
IE/Mac unterstützt beide Eigenschaften nicht.
Safari 1.3
Der Apple-Browser stellt diese Eigenschaften nur für Elemente, die nicht positioniert sind, korrekt dar.

TOP

height
Firefox 1, Mozilla 1,7, etc.
Unter bestimmten Umständen, wenn ein Prozentwert für height deklariert ist, wird der daraus resultierende absolute Wert, nicht aber der Prozentwert selbst, als berechneter Wert weitervererbt.
IE 7
Die Trident-Engine des IE/Win kann auch hier mit dem Wert inherit nichts anfangen.

TOP

min-height, max-height
IE 7
IE 7 verarbeitet diese Eigenschaften korrekt.
IE/Win 5.5, IE/Win 6
IE/Win bis Version 6 erkennt beide Eigenschaften nicht.
IE/Mac 5.5
IE/Mac unterstützt beide Eigenschaften nicht.
Safari 1.2
Der Apple-Browser unterstützt diese Eigenschaften nicht.

TOP

line-height
Alle Browser:
Die Eigenschaft line-height wird von allen modernen Browsern ohne Einschränkung unterstützt.

TOP

vertical-align
IE/Win 7
IE/Win bis Version 6 stellt die Werte top bzw. bottom im Text genau so wie text-top bzw. text-bottom dar. Ab Version 7 ist die Darstellung korrekt.
IE/Win 5.x
IE/Win 5 erkennt nur die Werte sub und super für Text, untestützt Graphiken innerhalb von Texten gar nicht.
IE/Mac 5.x
IE/Win hat gelegentlich Probleme mit der korrekten Darstellung von Graphiken im Text. Hier müsste im Einzelfall gründlich getestet werden.
Opera 7.x
Opera 7 erkennt die Werte top und bottom nicht.
Im Opera 8 ist das Problem behoben.

TOP

display
Firefox 1, Mozilla 1.7, etc.
Die Gecko-Engine erkennt nicht die Werte inline-block, compact und run-in.
Folgende Werte für Tabellen werden durch die Gecko-Browser unterstützt: table, inline-table, table-column-group, table-column, table-cell und table-caption.
IE/Win 5.x, IE/Win 6, IE 7
IE/Win erkennt nicht die Werte run-in, compact und marker sowie inline-block nur an Inline- Level- Elementen.
Die Werte für Tabellen werden durch IE/Win nicht unterstützt.
IE/Mac 5.x
IE/Mac erkennt nur den Wert run-in nicht.
Die Werte für Tabellen werden durch IE/Mac nicht unterstützt.
Opera 8 & 9
Opera erkennt alle Werte außerhalb von Tabellen, bis Version 8 wird der Inhalt von mit display:inline-block deklarierten Elementen bis an die Oberkante des margin-top hochgeschoben.
Die Werte für Tabellen werden vom Opera bis Version 9 alle mit Ausnahme von table-column-group und table-column erkannt.
Safari 1.3
Safari unterstützt nicht den Wert compact, der aber nicht mehr Bestandteil von CSS 2.1 ist.
Konqueror 3.5
Konqueror bis Version 3.5 erkennt nicht die Werte run-in, compact und marker.

TOP

position
IE/Win 5.x, IE/Win 6, IE 7
Internet Explorer bis zur Version 6 erkennt den Wert fixed nur am Element body. An allen anderen Elementen angewendet, kann dieser Wert unvorhersehbare Auswirkungen haben. Abhilfe gibt ein JavaScript.
Von der Version 7 an ist der Fehler behoben.
IE/Mac 5.x
Anders als die Windows-Version unterstützt IE/Mac alle Werte dieser Eigenschaft an allen Elementen. Ein kleines Problem tritt jedoch an Links innerhalb von fixed positionierten Elementen auf. Dort löst sich beim Scrollen die Klickfläche von der Schrift des Textlinks.

TOP

top
IE/Win 6, IE 7
Wird ein Prozentwert deklariert, verschiebt IE/Win bis Version 6 die Box aufgrund von Browserfehlern um einen Betrag, der größer ist, als es sich aus den Abmessungen des umschließenden Blocks und des gegebenen Wertes errechnet (Siehe dazu auch Positionierung mit float). Von Version 7 an ist der Fehler korrigiert.
Auch wird der Wert inherit ignoriert.

TOP

right
IE/Win 6, IE 7
Wird ein Prozentwert deklariert, verschiebt IE/Win bis Version 6 die Box aufgrund von Browserfehlern um einen Betrag, der größer ist, als es sich aus den Abmessungen des umschließenden Blocks und des gegebenen Wertes errechnet (Siehe dazu auch Positionierung mit float). Von Version 7 an ist der Fehler korrigiert.
Auch wird der Wert inherit ignoriert.

TOP

bottom
IE/Win 6, IE 7
Wird ein Prozentwert deklariert, verschiebt IE/Win bis Version 6 die Box aufgrund von Browserfehlern um einen Betrag, der größer ist, als es sich aus den Abmessungen des umschließenden Blocks und des gegebenen Wertes errechnet (Siehe dazu auch Positionierung mit float). Von Version 7 an ist der Fehler korrigiert.
Auch wird der Wert inherit ignoriert.

TOP

left
IE/Win 6, IE7
Wird ein Prozentwert deklariert, verschiebt IE/Win bis Version 6 die Box aufgrund von Browserfehlern um einen Betrag, der größer ist, als es sich aus den Abmessungen des umschließenden Blocks und des gegebenen Wertes errechnet (Siehe dazu auch Positionierung mit float). Von Version 7 an ist der Fehler korrigiert.
Auch wird der Wert inherit ignoriert.

TOP

float
IE 7
Die meisten der Probleme mit der Eigenschaft float wurden mit dieser Version gelöst. Siehe dazu auch den Artikel zum Thema Internet Explorer 7.
IE/Win 6
Probleme treten im Einzelfall bei komplizierteren Layouts auf. Dort sollte genau auf das Zusammenspiel mit geschachtelten Boxes, mit absolut positionierten Boxes und zwischen den Eigenschaften float und clear geachtet werden.
IE/Win 5.x
IE/Win 5 interpretiert diese Eigenschaft ein wenig lückenhaft. Im Einzelfall wird man um gründliches Testen nicht herum kommen.
IE/Mac 5.x
IE/Mac interpretiert diese Eigenschaft in den meisten Situationen richtig. Im Einzelfall wird man aber um gründliches Testen nicht herum kommen.

TOP

clear
IE/Win 5.x, IE/Win 6, IE 7
Das Zusammenspiel zwischen den Eigenschaften float und clear kann bis zur Version 6 im Einzelfall zum Problem werden. Deshalb ist gründliches Testen sehr zu empfehlen. Von Version 7 an sind die meisten Probleme gelöst.
IE/Mac 5.x
Das Zusammenspiel zwischen den Eigenschaften float und clear kann im Einzelfall zum Problem werden. Deshalb ist gründliches Testen sehr zu empfehlen.

TOP

z-index
Mozilla 1.8, Firefox 2, etc.
Elemente mit einem negativen Z-Index-Wert werden in vielen Fällen nicht dargestellt. Das hat nichts mit der Konstellation zu anderen Elementen, z. B. Eltern- Elementen, zu tun. Der Fehler wird in Version 3 behoben sein. Bis dahin sollte man zur Abhilfe im Einzelfall negative Z-Index-Werte meiden.

TOP

empty-cells
IE 7
IE 7 erfüllt den Wert hidden nur, wenn er für alle Zellen einer Tabellenreihe deklariert ist. Ist das nicht der Fall, missachtet er ihn völlig.
IE/Win 5.x, IE/Win 6
IE/Win 6 erkennt das CSS-Tabellenmodell nur teilweise und deshalb auch nicht die Eigenschaft empty-cells. Leere Zellen werden grundsätzlich ohne Rahmen dargestellt (Abhilfe durch  ), die Eigenschaft empty-cells wird nur dann beachtet, wenn eine ganze Reihe der Tabelle leer ist.
Opera 9
Opera lässt bei der Deklaration des Wertes hide den Hintergrund der Tabellenzelle stehen.

TOP

direction
IE/Mac 5
IE/Mac unterstützt diese Eigenschaft nicht.

TOP

unicode-bidi

Die Eigenschaft unicode- bidi wird mit zwei Ausnahmen von allen modernen Browsern unterstützt:

IE/Mac 5
IE/Mac unterstützt diese Eigenschaft nicht.
Safari 1.3
Safari unterstützt diese Eigenschaft ebenfalls bisher nicht.

TOP

overflow
IE 7
In der Version 7 stellt der Internet Explorer diese Eigenschaft richtig dar, nur der Wert inherit wird noch nicht erkannt.
IE/Win 5.x, IE/Win 6
Überfließende Inhalte werden vollständig und richtig dargestellt, jedoch wird, abweichend von der Spezifikation, das umschließende Element dazu ausgedehnt. Das gilt auch für den Wert visible als Ausgangswert. Der Wert inherit wird nicht erkannt.
IE/Mac 5.x
Der IE/Mac stellt jeden einzelnen Wert mit schweren Mängeln dar. Der Wert visible wird ebenso wie im IE/Win dargestellt. Der Wert hidden erzeugt einen Browser-Crash, wenn der Anwender auf das deklarierte Element klickt. Der Wert scroll generiert in einigen Fällen keine Scrollbalken. Der Wert auto schließlich wird wie der Wert visible interpretiert.

TOP

clip
IE/Win 6, IE 7
Version 6 stellt diese Eigenschaft im Allgemeinen korrekt dar, hat aber gelegentlich Probleme mit padding an abgeschnittenen Elementen. Die Probleme sind mit Version 7 behoben.
IE/Win 5.x
Unterstützt diese Eigenschaft nicht.
IE/Mac 5.x
Stellt diese Eigenschaft nicht an allen Elemente richtig dar, hat darüber hinaus Probleme mit padding an abgeschnittenen Elementen. Im Einzelfall sollte gründlich getestet werden.
Konqueror 3.5
Ignoriert den Wert für clip bei fixed Positionierung.

TOP

visibility
Firefox 1.5
In älteren Versionen vor 1.5 erkennt Firefox in Tabellen den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden. Dieses Verhalten ist für HTML-Elemente und für display-erzeugte Elemente gleich. Mit Version 1.5 ist das Problem beseitigt.
IE 7
Erkennt die Werte inherit und collapse an normalen Elementen nicht, reagiert innerhalb von Tabellen gar nicht auf diese Eigenschaft.
Opera 9
In Tabellen erkennt Opera bis Version 9 den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden. Dieses Verhalten ist für HTML-Elemente und für display-erzeugte Elemente gleich.
Safari 1.3
Safari behandelt den Wert collapse genauso wie hidden, d. h. das Element wird zwar unsichtbar, aber nicht ganz entfernt.
Konqueror 3.5
Ebenso wie Opera erkennt Konqueror in Tabellen den Wert collapse nur für die Elemente row und row-group, die aber nicht zusammenfallen, sondern lediglich unsichtbar dargestellt werden. Dieses Verhalten ist auch hier für HTML-Elemente und für display-erzeugte Elemente gleich.

TOP

Cascading Style Sheets ::Schnellreferenz

CSS 1 & CSS 2: Visuelle Formatierung und Effekte

Die Stylesheet-Schnellreferenz kann auch als PDF-Datei herunter geladen werden.

Eigenschaft Mögliche
Werte
Ausgangs-
wert
Vererbung Anwend-
barkeit
%-Bezugs-
wert
Medien-
gruppe
Eigenschaft Mögliche
Werte
Ausgangs-
wert
Vererbung Anwend-
barkeit
%-Bezugs-
wert
Medien-
gruppe

Hinweis 1:
Ausnahme: nicht-replatzierte Inline-Elemente, Tabellenreihen und Tabellenreihengruppen.

Hinweis 2:
Wenn die Breite des umschließenden Blocks sich auf dieses Element bezieht, dann ist das resultierende Layout undefiniert.

Hinweis 3:
Ausnahme: nicht-replatzierte Inline-Elemente, Tabellenspalten und Tabellenspaltengruppen.

Hinweis 4:
Nur, wenn die Höhe des umschließenden Blocks explizit angegeben bzw, wenn das Element absolut positioniert ist.

Hinweis 5:
Ausnahmen sind positionierte Elemente und Elemente, deren Darstellung durch display:none unterdrückt wird.

Hinweis 6:
Zur Umkehrung der Schreibrichtung innerhalb nachgeordneter Inline-Level-Elemente verwendet man die Eigenschaft unicode-bidi.

Hinweis 7:
Nur anwendbar auf nicht-replatzierte Block-Level-Elemente, Tabellenzellen und Inline-Block-Elemente.


TOP
Längenwerte
Prozentangabe
auto
inherit
auto Nein Alle Elemente, Ausnahme: 1) Breite des umschließen- den Blocks 2) Visual
Längenwerte
Prozentangabe
inherit
0 Nein Alle Elemente, Ausnahme: 1) Breite des umschließen- den Blocks 2) Visual
Längenwerte
Prozentangabe
none
inherit
none Nein Alle Elemente, Ausnahme: 1) Breite des umschließen- den Blocks 2) Visual
Längenwerte
Prozentangabe
auto
inherit
auto Nein Alle Elemente, Ausnahme: 3) Höhe des umschließen- den Blocks 4) Visual
Längenwerte
Prozentangabe
inherit
0 Nein Alle Elemente, Ausnahme: 3) Höhe des umschließen- den Blocks 4) Visual
Längenwerte
Prozentangabe
none
inherit
none Nein Alle Elemente, Ausnahme: 3) Höhe des umschließen- den Blocks 4) Visual
Längenwert
Prozentangabe
Zahlenwert
normal
inherit
normal Ja Alle Elemente font-size des Elementes selbst Visual
Längenwerte 5)
Prozentangabe
baseline
sub
super
top
middle
bottom
text-top
text-bottom
baseline Nein Inline- Level- Elemente oder Tabellenzellen Zeilenhöhe des Elementes selbst Visual
Eigenschaft
 
Mögliche
Werte
Ausgangs-
wert
Vererbung
 
Anwend-
barkeit
%-Bezugs-
wert
Medien-
gruppe
inline
block
inline-block
list-item
none
run-in
inherit
inline Nein Alle Elemente Nicht zutreffend All
static
relative
absolute
fixed
inherit
static Nein Alle Elemente, Ausnahme: generierte Inhalte Nicht zutreffend Visual
Längenwerte
Prozentangabe
auto
inherit
auto Nein Positionierte Elemente Höhe des umschließen- den Blocks Visual
Längenwerte
Prozentangabe
auto
inherit
auto Nein Positionierte Elemente Breite des umschließen- den Blocks Visual
Längenwerte
Prozentangabe
auto
inherit
auto Nein Positionierte Elemente Höhe des umschließen- den Blocks Visual
Längenwerte
Prozentangabe
auto
inherit
auto Nein Positionierte Elemente Breite des umschließen- den Blocks Visual
Eigenschaft
 
Mögliche
Werte
Ausgangs-
wert
Vererbung
 
Anwend-
barkeit
%-Bezugs-
wert
Medien-
gruppe
left
right
none
inherit
none Nein Alle Elemente, Ausnahmen: 5) Nicht zutreffend Visual
left
right
both
none
inherit
none Nein Block-Level- Elemente Nicht zutreffend Visual
auto
Ganze Zahlen
inherit
auto Nein Positionierte Elemente Nicht zutreffend Visual
ltr
rtl
inherit
ltr Ja Alle Elemente, siehe 6) Nicht zutreffend Visual
normal
embed
bidi-override
inherit
normal Nein Inline- Level- Elemente. Nicht zutreffend Visual
visible
hidden
scroll
auto
inherit
visible Nein Nur anwendbar auf: siehe 7) Nicht zutreffend Visual
shape
auto
inherit
auto Nein Nur absolut positionierte Elemente Nicht zutreffend Visual
visible
hidden
collapse
inherit
visible Ja Alle Elemente Nicht zutreffend Visual


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/quickref/visual-12.shtml
Gedruckt am Sonntag, dem 26. Oktober, 2014.
© Copyright All Contents 2002- 2014 K. Langenberg.
Commercial Use prohibited.


Notizen: