CSSでリストマーカーを背景画像表示した場合のブラウザ（OS）間のずれ
よくある手法だと思いますが、<li>に背景画像を表示し擬似的にマーカーを表示しています。
簡略化した例を下記に書きます。
例）
----------
HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
----------
CSS
* { padding: 0; margin: 0;}
body {
font-family: Osaka,'ＭＳ Ｐゴシック',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や画像サイズを変更したりしてみましたがなかなかうまくいきません。
他に何かよい方法はありますでしょうか。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
<li>に設定したスタイルを削除すると、きちんど連番になりました。解決はしましたが原因は不明です。