nicht angemeldet
Safari: overflow hidden
Hallo.
Mein CSS Layout entspricht im grundlegenden Aufbau in etwa dem dreispaltigen Layout aus der CSS Sektion von SelfHTML (http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig).
Der "Wrapper" in der Mitte hat folgende Definition:
#wrapper {
margin: 30px 16em 10px 11em;
padding: 3px 1.5em 2em 2em;
text-align: justify;
overflow: hidden;
}
Zu meiner Überraschung stellt der Safari den Inhalt nicht korrekt dar. Sprich: Text wird nur auf ca. 20% des eigentlich verfügbaren Platzes angezeigt, so als wäre der Viewport bereits extrem verkleinert.
Das Beispiel zum dreispaltigen Layout funktioniert allerdings. Offenbar scheitert mein Entwurf an einer Kombination mit anderen Attributen.? Gibt es hier einen bekannten Bug?
Freue mich über Hinweise. Danke.
-
overflow:hidden bringt die Elementbox dazu, einen Block Formatting Context zu bilden. Die Regeln, was das Überlappen der Margin-Box mit den Boxen der Floats angeht, haben sich während CSS 2.1 verändert, deshalb spielen die Browser dahingehend verrückt.
Der margin eines BFC neben einem Float darf (neuerdings) hinter dem Float verschwinden, wie es auch ohne BFC der Fall ist. Der BFC führt aber ohnehin dazu, dass keine Überlappung der Border-Box mit den Floats stattfindet. Daher sind margin und overflow:hidden (beim nicht-floatenden Element) zwei unterschiedliche Methoden, um die Boxen von einem Float zu trennen (siehe Artikel zu CSS-Spaltenlayout).
Was hier dazu kommt, ist jedoch ein schlichter Safari-Bug. (Das Buch »Fortgeschrittene CSS-Techniken« von Chao/Rudel geht darauf sogar ein.)
<!DOCTYPE html>
<style>
* { margin: 0; padding: 0; }
#a1, #b1 { float: left; width: 10em; background: red; }
#a2, #b2 { margin-left: 11em; background: blue; border: thin solid navy; }
hr { clear: both; margin: 1em 0; }
#b2 { overflow: hidden; }
</style>
<p id="a1">bla</p><p id="a2">bla</p>
<hr>
<p id="b1">bla</p><p id="b2">bla</p>Weil auf der einen Seite margin ist, wird die Box auf der anderen Seite gekürzt - wenn du jetzt beidseitig Margins hast, dann spielt Safari doppelt verrückt.
Die Lösung ist höchstens, die margins oder overflow:hidden zu vermeiden. Warum verwendest du overflow:hidden hier? Brauchst du den BFC?
Mathias
-
Was hier dazu kommt, ist jedoch ein schlichter Safari-Bug.
https://bugs.webkit.org/show_bug.cgi?id=19123
Mathias
-
Hallo Mathias,
danke dir! Genau das scheint das Problem zu sein..
Die Lösung ist höchstens, die margins oder overflow:hidden zu vermeiden. Warum verwendest du overflow:hidden hier? Brauchst du den BFC?
Ja (siehe hier). Gibt es sonst eine Möglichkeit?
Gruß..
-
Gibt es sonst eine Möglichkeit?
Jein, zumindest muss weterhin ein BFC erzeugt werden. Den kannst du aber auch z.B. erreichen, indem du die mittlere Spalte ebenfalls floaten lässt. float erzeugt ebenfalls einen neuen BFC.
Mathias
-
[...] indem du die mittlere Spalte ebenfalls floaten lässt. float erzeugt ebenfalls einen neuen BFC.
Was wohl zu anderen Problemen führen wird.? Ich wurschtel nochmal ein bißchen rum und melde mich wieder..
-
-
-