私はentypoというアイコンフォントで作業しようとしています。フォントは素晴らしいですが、開発者が選択したパディングは恐ろしいものであり、このフォントを怒らせて動作させます。アイコンは本当に良いですし、私はそれを動作させるようにしようとしています。CSSテキストの 'inner'行の高さを変更するには
フォントを通常のように見えるようにするには、フォントサイズを大きくする必要があります(40px +など)。
アイコンを15pxの高さのスペースに収めようとしている場合、font-sizeは40pxになります。そして、余分なスペースがすべて必要です。
考えられるすべての組み合わせで明示的な高さ、明示的なラインハイト、垂直方向のアライメントを設定しようとしましたが、結果はPCとMacの違いです。
私が考えることができるのは、「残りのスペース」は、異なるオペレーティングシステムによって異なって処理されるということだけです。
私が気付いていないいくつかのCSSプロパティがありますか?
PC
MAC
これは私が試してみて、私ができる最善のようにそれをゼロにするために使用される非常にハックCSSです。私はすでに高さとラインハイトで試してみたことを心に留めておいてください。それは常に同じ問題です.PCは常に、マックが置く場所の下にそれを置きます。君たちにデモする上で、それらの画像を期すため
.icon {
font-family: 'entypo';
display: inline-block;
color: #000;
font-size: 40px;
line-height: 0;
height: 0;
vertical-align: middle;
}
、これらは私が追加されたプロパティは、次のとおりです。
height: 20px; width: 20px; background: red;
のみ、それはとても異なってレンダリングする方法を実証します。
あなたはアイコンやテキストの[フィドル](http://www.jsfiddle.net)を投稿することができますか?セットアップ全体を見ることなく何かをするのは難しいです。 – fncombo
それは@ font-faceが含まれているので難しいですが、http://entypo.comのデモページに行き、chrome inspector(macで)を使ってこれらの正確な値を設定すると、問題が表示されます。http ://i.imgur.com/DmLts.png – Tallboy
そして、あなたのPCに行き、同じ特性を設定してください。それが不可能なのは、両方のオペレーティングシステムの赤いボックスの中に正確にフォントが入るようになっているからです。 – Tallboy