[HTML] Border nötig damit margin-top wirkt im FF - wieso?

[Benny-one]

Habe folgende Liste:

<ul style="background: #0000ff;">
    <li style="background: #ff9900; height: 50px; border: 1px solid #fff;">
        <a style="background: #ff0000; margin-top: 5px; height: 30px; display: block;" href="#">Test 1</a>
    </li>
    <li style="background: #ff9900; height: 50px;">
        <a style="background: #ff0000; margin-top: 5px; height: 30px; display: block;" href="#">Test 1</a>
    </li>
    <li style="background: #ff9900; height: 50px;"><a href="#">Test 1</a></li>
    <li style="background: #ff9900; height: 50px;"><a href="#">Test 1</a></li>
</ul> 

Wieso muss ich dem li einen Border geben, damit der Firefox das margin-top beim anchor annimmt? Bzw. wie kann ich das umgehen?

[XGremliN]

wenn du aus deinem Link ein Block-Level-Element machst, sollte das margin auch ohne die Border ausgewertet werden.

[Benny-one]

Die Anchors sind display: block, die LIs auch.

[mcmurphy]

das mysterium hatte ich auch schon - glaube nicht mal border:0px; hat geholfen.
Konnte bisher auch nicht nachvollziehen unter welcher bedingung eine explizite Angabe zur border nötig ist damit margin umgesetzt wird...
it's not a bug but a feature?

[Benny-one]

Es ist W3C.... http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Wurde wohl wieder abgeschafft. Ist also mehr ein Fehler des IEs, der sich nicht dran hält.
Workarounds und Beispiele gibt es hier http://dev.borlabs.de/gecko/gecko.htm

Eine Browserweiche für den IE6 und IE7 ist empfehlenswert. Die IE's brauchen ein position:static, der FF ein position: absolute

Die Browserweichen müssen aber getrennt angegeben werden:
Beispiel

#mein_element {
 position: absolute;
}

/* IE 6*/
* html #mein_element {
 position: static;
}

/* IE 7*/
*:first-child+html #mein_element {
 position: static;
}

Wenn man es nicht so macht, ignoriert der IE6 das static und macht ein absolute.