CSSでリストマーカーを背景画像表示した場合のブラウザ(OS)間のずれ
よくある手法だと思いますが、<li>に背景画像を表示し擬似的にマーカーを表示しています。
簡略化した例を下記に書きます。
例)
----------
HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
----------
CSS
* { padding: 0; margin: 0;}
body {
font-family: Osaka,'MS Pゴシック',sans-serif;
font-size: 12px;
line-height: 1.4;
}
ul, li { list-style: none;}
li {
back-ground-image: url(~~~~.gif); /* 5px×5pxのマーカー */
back-ground-position: 0 2px; /* winでジャストの位置 */
back-ground-repeat: no-repeat;
padding-left: 10px;
}
テストブラウザはwin:IE/Firefox、mac:safari/firefoxです。
上記の例でwinではジャスト表示なのですが、macでは予想以上に上にマーカーが表示されてしまいます。
back-ground-position: 0 center; にすると全体的に若干予想より下にきてしまい、IEではかなり下に来てしまいます。
line-heightや画像サイズを変更したりしてみましたがなかなかうまくいきません。
他に何かよい方法はありますでしょうか。
補足
回答ありがとうございます。 試しにCSSでbodyのfont-sizeを13px→15pxにしてみました。すると、マーカーは『・』になりますが、以前リストマーカーは小さいままです。 ちなみに、font-size:13px;では『・』の縦半分のサイズです。 他のブラウザで見れるようなマーカーサイズにしたいのですが....。