2012-10-25 6 views
5

ich dieses einfache Beispiel habe:Firefox Body Margin Bug?

<header> 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li class="clear"></li> 
    </ul> 
</header> 
<section>section</section> 

Und dieses Stück css:

BODY, HTML{ 
    margin: 0; 
} 
header{ 
    margin-bottom: 100px; /* section goes down */ 
} 
UL{ 
    list-style-type: none; 
} 
UL LI{ 
    float: left; 
    background: green; 
} 
.clear{ 
    clear: both; 
    float: none; 
} 
section{ 
    background: red; 
} 

So erwarte ich "header" geht direkt auf obere linke Ecke, dann 100px Rand, dann „-Abschnitt ". In allen gängigen Browsern funktioniert das wie erwartet, aber in Firefox (Version 16) bekommt "header" aus irgendeinem Grund extra margin-top.

Ist das ein Fehler?

Hier ein jsfiddle Beispiel: http://jsfiddle.net/AvZek/2/

BTW Wenn ich verwende clearfix anstelle von "clear" Klasse, als es ganz gut funktioniert hat.

+0

Ich bin nicht auf der Suche nach Problemumgehungen, ich bin interessiert, wenn dies ein Fehler ist, oder nur Verhalten, das ich nicht verstehe. –

Antwort

5

Das ist ohne Zweifel ein Fehler. Die Marge soll definitiv nicht da sein.

  • Nach Firebug, dem einzigen Nicht-Null-Marge, die, dass ich auf Ihrem header Elemente wie in Ihrem CSS die gleichen margin-bottom: 100px sehen berechnet wird. Alles andere ist null.

  • Selbst der DOM-Inspektor von Firebug hat Probleme, ihn zu identifizieren. Es hebt diese Region nie hervor, mit der offensichtlichen Ausnahme, wenn Sie sich selbst (das es als Teil seines Inhaltsbereichs hervorhebt) selbst überprüfen.

Ich fand jede Menge Fehlerberichte, die als Duplikate von this one geschlossen wurden, mit zahlreichen mehr Testfälle. Plus, es sieht so aus, als wäre es seit mindestens Firefox 2.

+0

Vielen Dank für Ihre Antwort. Genau das wollte ich wissen. –

0

können Sie {padding-bottom:100px;} statt Marge verwenden, um dies zu erreichen ..

+1

Danke für Ihre Antwort. Ich weiß, wie ich dieses Problem vermeiden kann. Ich bin interessiert, wenn das ein Fehler ist, oder nur ein Verhalten, das ich nicht verstehe. –

4

Stattdessen Code von verschmutzenden mit nicht-semantischem und unnötigen Leer <li> es fügen Sie einfach overflow: hidden zu Ihrem <ul>

HTML

<header> 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul> 
</header> 
<section>section</section> 

CSS

ul { 
    list-style-type: none; 
    overflow: hidden; 
} 

DEMO