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や画像サイズを変更したりしてみましたがなかなかうまくいきません。
他に何かよい方法はありますでしょうか。

回答No.3

goulan

ul,li 両方の margin,padding 指定を簡略化せずに、上下左右全てきちんと指定して下さい。それだけで巧くいくかどうかはわかりませんが。

IE6の場合、line-heightの指定が、置換要素を含む行に反映されない/ 非置換インライン要素への指定を無視する、などの症状がでます。line-heightの指定を変えるのではなく、外してみましたか？
お試し済みなら無視してください。

補足

＞margin,padding 指定を簡略化せずに、上下左右全てきちんと指定して下さい。
これは何故ですか？
対象ブラウザに関しての初期化はこれでいいと思っていたのですができれば理由をお願い致します。

＞line-heightの指定が、置換要素を含む行に反映されない/ 非置換インライン要素への指定を無視する
これは私も認識しております。
例のようにリストはテキストのみで置換要素は入れていません。
またline-height指定は<li>（リスト要素）に対して行っております。

すみませんline-heightのくだりは無視してください。
質問の要点は「win（MSゴシック）とmac（Osaka）の背景画像に見た目上うまく縦のセンタリング（テキストの真ん中にマーカーを表示すること）は可能か」ということです。
win、macともにFirefoxを対象としておりハックでの処理が難しいので悩み中という現状です。
背景画像での表示が無理そうなら何か代替案をご教授いただきたく…。