CSS letter-spacing Teile eines Wortes
Ich will etwas tun, wie dies in HTML:
"T i t l e"Das W3C empfiehlt mit der CSS-Eigenschaft letter-spacing statt Leerzeichen einfügen. Also, ich kann Folgendes tun: "<span style="letter-spacing: 0.5em;">Title</span>"
gibt das folgende Ergebnis:
"T i t l e" (sometimes IE), "T i t l e " (all other browsers)Die alternative, mit "<span style="letter-spacing: 0.5em;">Titl</span>e" Ergebnisse in
"T i t le" (sometimes IE), "T i t l e" (all other browsers)Gibt es einige einfach und elegante Weg, um das gewünschte Ergebnis in allen gängigen Browsern (IE6-8, FF, Opera, Safari)? Ich weiß, dass ich so etwas wie <span class="a"><span class="b">Titl</span>e</span> und conditional comments, dass die Zuweisung der richtigen CSS-basierend auf browser-Auswahl, aber ich will nicht zu überfrachten meine HTML und CSS mit browser-spezifischen Lösungen.
EDIT: Über die "manchmal IE": ich habe zwei Rechner, beide mit Windows 7 und IE8 (8.0.7600.16385). Einer von Ihnen gibt die linke hand führen, einer von Ihnen der rechten hand führen (für genau der gleichen HTML-Datei). Leider hält der Kunde den IE7 produziert der linken hand führen...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie als Zugabe margin-right:-0.5 em, um Ihre Spannweite.
z.B.
Getestet in FF 3.5.7, Opera 10.10, Chrome 3.0.195.38, IE6, IE7, und IE8 standard-und Kompatibilitätsmodi, es Art von arbeiten. In Ihren genauen Beispiel, es scheint OK, obwohl es nicht richtig wäre, wenn der span hatte eine hintergrund Farbe, da würde Leck auf dem zweiten Anführungszeichen.
Auch, Sie müssten vorsichtig sein, um nicht fügen Sie alle CSS, um die Spanne, die verursacht hasLayout im IE6,IE7 eingestellt werden, als würde es brechen.
Kommentar:
Dies ist ein sehr sonderbares Verhalten. CSS 2.1 und früher ist ziemlich vage, was passieren soll, nachdem das Letzte Zeichen. Er spricht über die Abstände zwischen Charaktere, aber das ist nicht genug, wenn die Spannweite betrachtet wird, als Teil einer größeren Zeichenfolge von text. Es scheint, dass Microsoft zunächst zu einem anderen Ergebnis gekommen, um die anderen browser-Macher, was es bedeutete. MS haben Sie dann im IE8, gewählt, um zu wechseln und kopieren Sie den anderen Browser.
CSS 3, auf der anderen Seite, ist ziemlich klar. Es bietet in diesem Beispiel:
Hinweis: die Entfernungen nach d, f, und g und. Dies klar zu sein scheint, die Angabe des IE6, IE7 Verhalten.
Es sollte angemerkt werden, dass dieser Teil von CSS 3 ist ein Entwurf, und dass das Beispiel wurde geschrieben, lange bevor IE8 erstellt wurde. Es ist wahrscheinlich deshalb, IMO, dass die CSS-3-Anforderungen können sich auch in Zukunft ändern.
Habe ich versucht deinen code in IE8, und bekam "T i t l e". Vielleicht Sie sollte versuchen, verschiedene doctypes, um zu sehen, wenn die browser reagieren auf diese und anpassen Ihre CSS-Verhalten.
Haben Sie versucht, mit px anstatt der ems? IE manchmal tut lustige Dinge mit ems - versuchen Sie Folgendes statt: