2012-05-27 13 views
10

Ich versuche, große Initialen in < p> Elemente zu erstellen, die auf der zweiten Zeile beginnen und zwei Zeilen abdecken sollten, aber in firefox ist der erste Buchstabe nicht wie erwartet positioniert (funktioniert überall sonst, auch in IE, nur FF macht Probleme ...)INITIALS - CSS: first-letter über zwei Zeilen

http://jsfiddle.net/6SfHG/1/

First letter problem

Irgendwelche Ideen, wie es auf der gleichen Ebene beginnen zu machen?

+1

Vielleicht haben sie unterschiedliche 'Line-height' Werte? Hilft es, diese explizit festzulegen? –

Antwort

6

Das hat für mich gearbeitet, obwohl es nicht sehr elegant ist:

So einen Cross-Browser-Drop-Cap-Effekt erhalten mit: first-letter Pseudoelement, das vertikal ausrichtet, müssen Sie Schwimmer anwenden: links , dann die Höhe der Schriftkappenhöhe finden, die Zeilenhöhe auf diese reduzieren, die Randhöhe so einstellen, dass sie korrekt in Firefox und Opera oder einem WebKit-Browser ausgerichtet ist, und dann bedingte Kommentare für einen IE verwenden, nur Stylesheet entfernen Rand- Oben und ändern Sie die Zeilenhöhe, um den Typ korrekt vertikal auszurichten.

http://nickcowie.com/2009/drop-caps-first-letter-and-firefox/