要素の先頭にアイコンを表示するときには、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 Pゴシック」なので、閲覧者のOSやブラウザの設定によっては今後も引き続き対策をしなければいけません。
現状考えられる回避方法をまとめます。
１：アイコンの高さをフォントサイズより小さくする
当たり前っちゃあ当たり前なんですが…現状最も確実な方法ではあります。
だいたい3ピクセル以上小さいと、ずれはしますが欠けないようです。
２：background-positionのY値をem単位で配置する
background-positionは、二つ目の値が上下（Y）になります。
ここの単位を「em」にすると、「px」「%」よりはずれが少ないようです。文字サイズ変更にも追随します。
a.icon {
padding-left: 12px;
background: url(../images/parts/icon.gif) no-repeat 0 0.2em;
}
ただし、変動値になるのでCSSスプライトを使ってサーバーへのリクエストを節約するテクニックが使えません。
インライン要素のリストマークに対してはCSSスプライトは使わない方がよさそうです。
CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス
下にpaddingを取る
本来、インライン要素はpaddingが無効になるはずですが、Internet Explorerでは有効になります。
それを利用してずれそうな分だけ下に余白を取ります。
a.icon {
padding-left: 12px;
padding-bottom: 2px;
background: url(../images/parts/icon.gif) no-repeat 0 0.2em;
}
ただし、有効なのはIEだけで、FirefoxやOperaだったりすると効果がありません。
４：要素をインラインブロックにする
現状で、最も確実に回避できる方法がこれです。
- a要素をインラインブロックにする
- アイコンの高さ分の行高さを取る
- テキストを縦中央にする
a.icon {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
line-height: 16px;
padding-left: 12px;
padding-bottom: 2px;
background: url(../images/parts/icon.gif) no-repeat 0 0.2em;
}
要素がインラインではなくなるので、アイコンをフォントに関係なく中央に寄せることができます。
Internet Explorer 6にも対応しています。
ただし、行高さを指定してしまうため、二行以上のリストに対応することができません。
私が把握してるのはこれくらいです。他にないですか…（’д`）
インライン要素の行高さは、メイリオが特に顕著なようです。
bodyのline-heightを「1.5」などにすると、この辺の回避が難しくなります。
デフォルト値は「1.1」としておいて、要素別に都度line-heightを指定するのが、面倒ではありますが無難だと思います。