2009-07-23 5 views
4

Ich habe Inhalt eingefügt mit dem: vor Pseudo-Element für eine Klasse. Ich habe versucht, diesen Inhalt mit Margin-Top zu positionieren, aber Firefox ignoriert einfach die Eigenschaft. Der Code folgt:margin-top funktioniert nicht mit: vor

.bef { 
    line-height: 2em; 
    white-space: nowrap; 
    font-size:24px; 
    display: block;  
    } 

.bef:before { 
    display: block; 
    margin-top:2em; 
    padding: 0; 
    color: #666666; 
    content:"Hello";  
    } 

Weiß jemand, warum Firefox die margin-top-Eigenschaft ignoriert werden kann?

EDIT: Obwohl margin-top wird völlig ignoriert, margin-bottom: - X em funktioniert und ich bin in der Lage das bewegen: auch vor Element um

Antwort

2

Es scheint, dass Darko Z hat Recht.

http://jquery.nodnod.net/cases/577

Hypothetisch, die ersten beiden Testfälle (von <hr> getrennt) machen identisch sollte, die sie in Gecko tun (via FF3.5/Mac), aber Webkit (via Safari4/Mac) macht die :before und :after Segmente als Inline. Der dritte Testfall scheint zu implizieren, dass Webkit derzeit das auslösende Element als Block benötigt, damit der generierte Inhalt blockiert wird.

Die Spezifikation ist nicht klar, was das richtige Verhalten ist. Es könnte sich lohnen, eine Frage zu www-style zu stellen, um zu sehen, welches Rendering-Engine-Verhalten korrekt ist, und dann einen Fehler mit der falschen Rendering-Engine zu archivieren, um es in zukünftigen Versionen zu reparieren. Fühlen Sie sich frei, meinen Code als Testfall zu verwenden.

+0

Anzeige: Block funktioniert nicht -> Rand oben wird immer noch ignoriert. –

+0

Der Grund dafür, dass margin-top nicht funktioniert, liegt darin, dass vertikale Ränder und Paddings nicht angewendet werden, wenn ein Element angezeigt wird: Inline. –

+1

ok, gibt es dann eine Möglichkeit, die Anzeigeeigenschaft zu ändern? Ich habe bereits .fef und .bef: vor Selektoren als display: block (siehe oben bearbeiteter Code) deklariert. margin-top wird immer noch ignoriert. –

2

versuchen machen .bef Anzeigeblock? nur eine Vermutung, dass das enthaltene Element der: vor muss blockiert werden, so dass es auf den Rand-Top hören kann ...

+0

Es hat nicht funktioniert –

Verwandte Themen