Warum scheint eine CSS-Klasse auf Mobilgeräten ignoriert zu werden?

Question

Ich arbeite an einer Wordpress-Website, in der ich das musikalische "flache" Symbol verwenden muss. Um herauszufinden, was eine gute Möglichkeit ist, damit umzugehen, habe ich in dem entsprechenden Artikel (https://en.wikipedia.org/wiki/Flat_(music)) ausgecheckt, was auf Wikipedia verwendet wird.

Ich weiß, wie man den HTML-Entity-Code findet und diesen verwendet, und ich weiß, dass ich das Symbol einfach von woanders kopieren und einfach direkt in meinen Post einfügen kann. Aber wenn das gemacht wird, gibt es extra Polsterung um das Symbol, so dass es falsch angezeigt wird, wie folgt: D ♭. (Es ist eigentlich nicht hier auf SO, so musste ich auf jeder Seite Leerzeichen hinzufügen, um es zu simulieren.) Es sieht aus wie das Problem auf Wikipedia durch den folgenden Code behandelt wird, der überall das flache Symbol verwendet wird:

<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span> 

Also habe ich den gleichen Code verwendet und ich habe eine "music-symbol" -Klasse in der CSS-Datei erstellt, in der ich Padding auf 0 setze. Ich konnte die entsprechende Klasse auf Wikipedia nicht finden, aber ich vermutete, dass es das ist es enthielt. Ich weiß ehrlich nicht, warum das funktioniert (ich bin ein Noob), aber es scheint zu funktionieren, vorausgesetzt, ich spezifiziere die Schriftart mit dem Stil-Tag wie gezeigt. Wenn ich sage "es funktioniert", meine ich, dass es das flache Symbol direkt neben dem Notennamen erscheinen lässt, wie es sollte, ohne zusätzlichen Platz, so: D ♭.

Allerdings, wenn ich die gleiche Website auf meinem Android anzeigen, ist der Abstand immer noch da. Kann mir jemand erklären, warum und wie ich das angehen sollte?

Gibt es auch einen besseren oder einfacheren Umgang mit Sonderzeichen wie der Wohnung? Ich verstehe nicht, warum ich es direkt hier auf SO einfügen konnte und dass der Abstand korrekt ist, ohne die zusätzliche Klassenreferenz und das Style-Tag zu verwenden.

Answer 1

Soweit ich innerhalb der Stile auf dieser bestimmten Website sehen kann, gibt es kein zusätzliches Styling für die music-symbol Klasse. Von dem, was ich sagen kann, erbt der zusätzliche Leerraum das Element und die Schriftart (en), die verwendet werden. Das Padding ist nicht das, was Sie ändern möchten. Sie möchten das Element margin des Elements span anpassen, in dem das Symbol platziert ist.

Klassendefinition Siehe unten für Styling ein span mit der music-symbol Klasse

span.music-symbol { 
    margin-left: -2px; 
}