フォントが変わるとアイコンがずれる問題の対策 | ウェビンブログ | 札幌のWebデザイナー・カスタマイズアドバイザー WebbingStudioのよしなし語り

要素の先頭にアイコンを表示するときには、CSSの「padding」と「background-position」を使うのが一般的です。 a.pdf { padding-left: 24px; background: url(../images/parts/pdf_ico.gif) no-repeat 0 0; } ですが、対象がテキストリンクなどのインライン要素で、かつアイコンの大きさがフォントサイズギリギリだった場合 「フォントが『メイリオ』や『ヒラギノ角ゴ』だとちゃんと表示されるのに、『MS Pゴシック』だとアイコンの下が欠ける」 という現象が起きてしまいます。 これはWindowsのMS Pゴシックとそれ以外でテキストの開始位置が異なっているために起こる現象らしく、ブラウザ別のCSSハックでは回避できません。 また、最新OSのWindows7でも、ブラウザのデフォルトフォントは「MS

[d4-1977]

ずれの話。アイコン画像を少々小さめにしているなあ

[matsuko1103]

フォントによって結構揺れますよね。。。