2009-07-23 7 views
4

J'ai inséré du contenu en utilisant le pseudo-élément: before pour une classe. J'essayais de positionner ce contenu en utilisant margin-top mais firefox ignore simplement la propriété. Le code suit:margin-top ne fonctionne pas avec: avant

.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";  
    } 

Est-ce que quelqu'un sait pourquoi Firefox peut ignorer la propriété margin-top?

EDIT: Bien que la marge supérieure est totalement ignorée, margin-bottom: - X em travaille et je suis en mesure de déplacer le: avant élément autour

Répondre

2

Il semble que Darko Z a raison.

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

Hypothétiquement, les deux premiers cas de test (séparés par <hr>) doit rendre identique, ce qu'ils font dans Gecko (via FF3.5/Mac), mais Webkit (via Safari4/Mac) rend le :before et :after segments comme en ligne. Le troisième cas de test semble impliquer que Webkit exige actuellement que l'élément déclencheur soit bloqué pour que le contenu généré soit bloqué.

La spécification n'est pas claire sur le comportement correct. Il peut être utile de soulever une question sur www-style pour voir quel comportement du moteur de rendu est correct, puis de déposer un bogue avec le moteur de rendu incorrect pour le corriger dans les futures versions. N'hésitez pas à utiliser mon code comme un cas de test.

+0

affichage: le bloc ne fonctionne pas -> margin-top est toujours ignoré. –

+0

La raison pour laquelle margin-top ne fonctionne pas est que les marges verticales et les paddings ne sont pas appliqués lorsqu'un élément est affiché: inline. –

+1

ok, alors est-il un moyen de changer la propriété d'affichage? J'ai déjà déclaré à la fois .bef et .bef: avant que les sélecteurs affichent: block (voir le code édité ci-dessus). margin-top est toujours ignoré. –

2

essayer de faire bloc d'affichage .bef aussi? il suffit de deviner que l'élément contenant de: avant doit être bloqué afin qu'il puisse écouter le margin-top ...

+0

Cela n'a pas fonctionné –