Seltsames box-model-Verhalten von Webkit-Browsern
F30
- css
Hallo zusammen,
ich bin in den letzten Tagen auf ein wirklich seltsames Verhalten von Webkit-Browsern gestoßen: Es geht dabei um die Art und Weise, wie ein margin neben anderen (gefloateten) Blöcken berechnet wird.
Das müsste in meinen Augen eigtl. ein gängiges Problem sein, trotzdem konnte ich dazu nichts finden.
Folgende Situation:
Ich habe zwei <aside>
s gefolgt von einem <div>
. Alle werden nebeneinander angzeigt, der <div>
ganz links und dann #aside-1
und #aside-2
.
Diesen Effekt erziele ich durch den folgenden CSS-Code:
aside {
margin-bottom: 30px;
padding: 0px 10px 10px;
width: 180px;
}
#aside-1 {
float: right;
margin-left: -400px;
margin-right: 200px;
}
#aside-2 {
float: right;
}
div {
overflow: auto; /* Block formatting context */
margin-right: 400px;
padding: 0px 10px 0px 20px;
}
Das funktioniert auch ganz wunderbar im Firefox und IE>6.
In Chrome und Safari allerdings wird der margin-right
des <div>
s nicht von der ganz rechten Begrenzung, sondern erst von der linken Seite von #aside-2
aus berechnet. Das führt dazu, dass der <div>
im Endeffekt 200 Pixel (Breite + padding von #aside-2
) zu schmal ist.
Woher kommt dieses seltsame Webkit-Verhalten und was kann man dagegen tun?
Vielen Dank euch Allen im Voraus!
Hallo,
Ich habe den Code nicht ausprobiert, aber deiner Beschreibung nach vermute ich ins Blaue hinein:
An element with block formatting context adjacent to a floated block has phantom right margin.
Das ist in der Tat ein altbekannter Bug (Reported: 2008-05-18).
Was man dagegen machen kann: Direkt nichts. Man kann versuchen, die margins umzuverteilen oder die nicht floatende Spalte ebenfalls floaten zu lassen.
Mathias
OK, ich hab noch ein bisschen rumprobiert und bin auf eine einfache Lösung gekommen:
Man muss einfach nur dem <div>
eine feste Breite geben. Das funktioniert natürlich nur, wenn das Layout auf festen Breiten basiert, was bei mir aber der Fall ist.
Die Beschreibung des von molily verlinkten Bugs passt nicht genau, aber irgend soetwas muss es schon sein.