モバイルでCSSクラスが無視されるのはなぜですか？

Question

私は、音楽の "フラット"シンボルを使用する必要があるWordpressのウェブサイトに取り組んでいます。これを処理するにはどうすればよいかを理解するために、対応する記事（https://en.wikipedia.org/wiki/Flat_(music)）でWikipediaで何が使われているのか調べました。

私はHTMLエンティティコードを見つけてそれを使用する方法を知っています。他の場所からシンボルをコピーして、自分の投稿に直接貼り付けることができます。しかし、これを行うときに、シンボルの周りに余分な余白があるので、これは次のように正しく表示されません：D♭。実際にはここでそれをやっているわけではないので、各面にスペースを入れてシミュレートする必要がありました。問題はウィキペディアで次のコードで処理されるようです。

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

私は同じコードを使用し、CSSファイルで "padding"を0に設定した "music-symbol"クラスを作成しました。私はWikipediaで対応するクラスを見つけることができませんでしたが、それは含んだ。私は正直なところ、なぜこれがうまくいくのか分かりません（私はノブです）が、スタイルタグを使ってフォントを指定すると、うまく動作しているようです。私が "それがうまくいく"と言うとき、私は平らなシンボルが音符の名前のすぐ隣に現れることを意味します。

しかし、Androidで同じサイトを表示しても、間隔はそのまま残ります。なぜ誰に説明することができますか、どのようにこれに対処する必要がありますか？

また、フラットのような特別なシンボルを処理する方が簡単かどうかですか？私はなぜそれをここに直接貼り付けて余分なクラス参照とスタイルタグを使わなくても間違いがないのはなぜですか？

Answer 1

私がその特定のサイトのスタイル内で見る限り、music-symbolクラスのための追加のスタイリングはありません。私は、追加の空白が、使用されている要素とフォントを継承していることを伝えることができます。あなたが変更しようとしているものではないので、シンボルが置かれているspan要素のmarginを調整したいと思うでしょう。 `スタイル="フォントファミリ： 『ArialのUnicodeのMS』、 『ルシーダサンズUnicodeの』

は、これらのフォント名は引用符で囲む必要がありmusic-symbolクラスとspan

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