Übersetzt mit freundlicher Genehmigung von http://www.quirksmode.org/css/display.html
Die Erklärung zu verschiedenen Arten in CSS von display:
Wie ein bestimmtes HTML-Element angezeigt werden soll, kann über die Anzeige-Eigenschaft festlegt werden.
Siehe hierzu auch die W3C-Spezifikationen.
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 as IE7 | IE8 as IE8 | FF 2 | FF 3.0 | FF 3.1b | Saf 3.0 Win | Saf 3.1 Win | Saf 4.0b Win | Chrome 1 | Chrome 2 | Opera 9.62 | Opera 10a | Konqueror 3.5.7 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | Ja | Ja | |||||||||||
| Ja | Ja | Ja | Ja | Ja | Ja | |||||||||||
| Ja | Ja | Ja | Ja | Ja | Ja | |||||||||||
| Nein | unvollständig | Ja | Nein | Ja | Ja | Ja | Ja | Ja | ||||||||
IE 6/7 akzeptiert den Wert nur bei Elementen,
die naturgemäß bereits |
||||||||||||||||
| Nein | Ja | Ja | Ja | Ja | Ja | Ja | ||||||||||
| Nein | Ja | Nein | falsch | falsch | Ja | falsch | ||||||||||
|
Safari, Chrome und Konqueror unterstützen run-in auch dann, wenn es vor einem Element mit display: inline auftritt. Das sollte eigentlich nicht sein. |
||||||||||||||||
| Nein | Nein | buggy | Nein | Nein | buggy | buggy | ||||||||||
| Nein | Ja | Ja | unvoll- ständig |
Ja | unvoll- ständig |
Ja | Ja | Ja | ||||||||
Safari 3 und Chrome 1 benötigen Elemente mit |
||||||||||||||||
| Selector | IE 5.5 | IE 6 | IE 7 | IE8 as IE7 | IE8 as IE8 | FF 2 | FF 3.0 | FF 3.1b | Saf 3.0 Win | Saf 3.1 Win | Saf 4.0b Win | Chrome 1 | Chrome 2 | Opera 9.62 | Opera 10a | Konqueror 3.5.7 |
display: block
display: block bedeutet, dass dieses Element als Block-Element angezeigt wird, wie Absätze (<p>) und Überschrifen (<h...>).
Ein Block-Element hält Abstand nach oben sowie nach unten und es werden keine weiteren HTML-Elemente in der Zeile geduldet. Die Ausnahme wird z.B. gemacht durch Hinzufügen eines float für ein anderes Element.
display: inline
display: inline bedeutet, dass diese Elemente in der Linie im entsprechenden Block angezeigt werden. Inline, also auf gleicher Zeile. Wenn kein Element nach dem auf inline gesetzten Element kommt,
wenn also das auf inline gesetzte Element zwischen 2 Blöcken sich befindet, wird es zum "anonymen Block" - mit der kleinsten möglichen Breite.
display: none
display: none
bedeutet, dass dieses Element nicht angezeigt wird (deshalb ist es im folgenden Beispiel nicht zusehen).
display: inline-block
Anmerkung: In IE 6 und 7 inline-block funktioniert dies nur bei Elementen, die von Natur aus Inline-Elemente sind.
Firefox 2 und älter unterstützen nicht diesen Wert. Möglich ist die Nutzung über -moz-inline-box, nur sollte man sich dessen bewusst sein, dass dieses nicht exakt dem inline-block entspricht und es nicht immer in allen Situationen funktioniert wie erwartet!
Ein inline block wird in der Zeile platziert (d. h. auf der gleichen Zeile wie angrenzender Inhalt), aber es verhält sich wie ein Block-Element.
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.
Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.
span (und nicht div) mit display: inline-block; width: 10emHier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten. Hier ein wenig Textinhalt, um das Verhalten des Blocks zu beobachten.
Es sollte wie in folgender Bildschirmkopie vom Browser Opera arbeiten:
Bildschirmkopie: Beispiel von display: inline-block
Die eigentliche Anwendung von "display: inline-block" ist, wenn für ein Inline-Element eine Breite über "width" zugewiesen werden soll. Unter bestimmten Umständen ist bei einigen Browsern die Zuweisung einer Breite auf ein echtes Inline-Element nicht möglich. Wenn aber auf die "display: inline-block" umgestellt wird, ist es möglich die Breite width mitzugeben.
display: list-item
display: list-item bedeutet, dass dieses Element als Listen-Element behandelt wird. Das hat als Auswirkung, dass Aufzählungszeichen (in der Regel Aufzählungspunkte) anzeigt werden wie beim HTML-TAG <ul>. Eine Ausnahme bildet der IE5 auf dem Mac, der eine numerische Aufzählung (wie der HTML-TAG <ol>) anzeigt. Achten Sie darauf, ob die Startzahl korrekt ist. Gibt es davor schon Aufzählungen, kann es durchaus passieren, dass die angezeigte mit der nächsthöheren Zahl weitermacht.
display: run-in
Safari, Chrome, und Konqueror handhaben den zweiten Test falsch. Die Run-in-Box darf nicht neben der Inline-Box angezeigt werden.
display: run-in Definition vom
W3C:
"If a block box (that does not float and is not absolutely positioned) follows the run-in
box, the run-in box becomes the first inline box of the block box.
Otherwise, the run-in box becomes a block box."
"Wenn eine Block-Box (die nicht floatet und nicht absolut positioniert ist) der run-in-Box folgt, wird die run-in-Box zur ersten Inline-Box.
Andernfalls wird die run-in-Box zu einer Block-Box."
Frage: Warum sollte man das machen wollen?
Wie auch immer, Opera ist der einzige Browser, der run-in-Box unterstützt. Er entfernt allerdings den oberen und unteren Innenabstand von der run-in-Box, obwohl es vom W3C keinerlei Anweisung dafür gibt.
Der IE 5 Mac reagiert auf die run-in-Box, indem die-run-in-Box eine leichte Einrückung erfährt.
Ich habe keine Idee, wozu.
Es sollte gehen, wie es der Browser Opera zeigt:
Bildschirmkopie: Beispiel von display: run-in
display: compact
Kein Browser unterstützt compact richtig. Bisher zeigt compact bei Safari, Opera und Konqueror Wirkung, aber diese ist falsch (denke ich).
display: compact Definition vom
W3C:
"If a block box (that does not
float and is not absolutely positioned)
follows the compact box, the compact box is formatted like a one-line inline box.
[...lots of stuff about the margin...]
Otherwise, the compact box becomes a block box."
Andernfalls wird die compact-Box zu einer Block-Box."
Die compact-Box wird auf der linken Seite des nachfolgenden Blocks platziert, wenn dort genügend Platz dafür vorhanden ist. Im zweiten Beispiel wurde unter der dritten Box genügend Platz für die compact-Box geschaffen über einen linken Außenabstand. Im ersten Beispiel ist nicht genügend Platz, somit muss die compact-Box als ein Block-Element angezeigt werden.
Es sollte gehen, wie es in Bildschirmkopie des Browsers Opera gezeigt wird:
Bildschirmkopie: Beispiel von display: compact
display: table
Nicht unterstützt vom IE.
Safari fordert Elemente mit display: table und display: table-row, um die Zellen korrekt anzuzeigen.
iCab zeigt keinen Text bei 'display: table-row'.
display: table sagt den Elementen, dass diese als Tabelle anzeigt werden sollen.
Geschachtelte Elemente sollten angezeigt werden als
table-row und table-cell, nachgeahmt den guten alten <tr> und <td>.
Es gibt auch ein display: table-column, soll aber nichts anzeigen und dient wie die ursprünglichen COL zum Transport der Design-Informationen. Ich bin mir nicht sicher, wie es funktioniert.
Dieses Beispiel hat divs mit display: table, table-row und table-cell, alle richtig verschachtelt.
Es sollte aussehen, wie es die Bildschirmkopie des Firefox 1.5 zeigt:
Bildschirmkopie: Beispiel von display table values im Mozilla
Indessen, Safari besteht darauf die Elemente mit display: table and display: table-row: wie folgt anzuzeigen.
Bildschirmkopie: Beispiel von display table values im Safari
Auf der Originalseite findet sich hier die Möglichkeit, die verschiedenen Display-Arten online zu kombinieren und zu testen. Anzusehen unter: http://www.quirksmode.org/css/display.html#link9
- Startseite
- Video-Kurs
- HTML lernen
- CSS lernen
- Einbinden von CSS
- Aufbau CSS-Anweisung
- CSS kontrollieren mit CSS-Validator
- CSS und Farbe
- Schriften mit CSS gestalten
- Rahmen in CSS
- CSS Box Modell Hierarchie
- Hintergrundbilder mit CSS
- CSS-Selektoren
- Layout über CSS
- horizontale Navigation
- einfache vertikale Steuerung
- Tabellen mit CSS formatieren
- Formulare über CSS gestalten
- Erklärung zu display
- CSS Tipps und Tricks
- Webhosting u. Domain
- Werkzeuge
- Rund um Websites
- Impressum
hier klicken für
mehr Informationen