:: Selektor für den ersten Brief - IE11 hat ein anderes Layout als Firefox
Ich versuche, einen Titel mit ::first-letter CSS-Selektor zu stylen, aber ich habe ein merkwürdiges Layout, das zu Internet Explorer 11 führt.
Der Code ist ziemlich einfach: JSFiddle .
Bei Mozilla Firefox ist der erste Buchstabe auf die Unterstreichung ausgerichtet, während er bei Internet Explorer 11 um 15 Pixel niedriger ist.
Was vermisse ich?
5 Antworten
Dies ist eine bekannte Diskrepanz zwischen der Behandlung von Floating ::first-letter Pseudoelementen durch Firefox im Vergleich zu anderen Browsern, dokumentiert in Dieser Fehlerbericht . Firefox ist der einzige Browser, der CSS2.1 hier richtig befolgt, was ironisch ist, wenn man bedenkt, dass Firefox ansonsten der Browser ist, in dem ::first-letter am meisten eingerissen ist (Chrome ist knapp an zweiter Stelle).
Die schlechte Nachricht ist, dass es nichts gibt, was Sie tun können, um dies in anderen Browsern zu umgehen, ohne eine Art Browser-Hack zu verwenden.
Die (sorta) gute Nachricht ist, dass die Arbeitsgruppe plant, dieses Verhalten im CSS Inline Module Level 3 mit dem initial-letter-align property , und wir können nur hoffen, dass die Browser-Anbieter es letztendlich implementieren.
Ihre Anforderung ist zu diesem Zeitpunkt noch nicht ganz klar, da wir nicht genau ableiten können, wie Sie die Ausrichtung der restlichen Buchstaben und die Unterstreichung hinsichtlich der Größe und Position Ihrer ersten ableiten möchten.
Aber hier sind zwei Versionen eines Codes, die auf Ihre mögliche ursprüngliche Anforderung abzielen:
%Vor% 
ps .: Sie müssen Ihren Code in anderen Browsern als Firefox testen, da Ihr Code in Chrome genauso aussieht wie im Explorer und in jedem anderen großen Browser außer Mozilla.
Stellen Sie die Zeilenhöhe auf h2 ein. Verwenden Sie vorzugsweise relative Schriftgrößen (Basisgröße in body selector).
%Vor%Bitte verwenden Sie die Zeilenhöhe für den ersten Buchstaben und die Spanne, um sie in beiden Browsern gleich zu machen.
Also wird der Code sein:
Tags und Links html css pseudo-element