endlich ein Macbook
Das neue Telefon
iStar Composer
Objective-C: Schwerer Anfang und Erleuchtung
xtorrent doof!
Bug in Safari bei display:table-cell
Heut hab ich mich etwas mit CSS gespielt um eine tabellenartige Struktur zu erzeugen. Der Bequemlichkeit halber hab ich keine Klassen vergeben für die Zeilen und Zellen sondern div und span verwendet und dabei ist mir aufgefallen dass der Safari-Browser das Attribut display offenbar weitervererbt was aber laut Spezifikation nicht geschehen sollte. Besser ist's natürlich für die Zeilen und Zellen eigene Klassen zu vergeben, aber ich bin eher zu faul dafür...
Der Bug zeigt sich derart dass ein weiteres div oder span in den eigentlichen Tabellen-Zellen an der falschen Position landet, nämlich oben statt unten wie im Firefox. Das Ding ist leider auch schwer erkennbar weil z.B. eine border nicht vererbt wird. Also Work-Around also entweder ordentliche Klassennamen vergeben oder wie in meinem Beispiel display bei den untergeordneten Elementen wieder überschreiben.
Beispielcode
<style type="text/css">
.table { display: table; }
.table div { display: table-row; }
.table div span { display: table-cell; }
/* für Safari */
.table div div { display: block; }
.table span span { display: inline; }
</style>
<div class="table">
<div>
<span>Zelle A1</span>
<span>Zelle B1</span>
</div><div>
<span>Zelle A2
<div>Dieses div sollte keine table-cell sein, Safari würde es
wegen seines Bugs gern oben in der Zelle rendern.</div>
</span>
<span>Zelle B2</span>
</div>
</div>