molily: Safari: overflow hidden

Beitrag lesen

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