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.4

goulan

対象ブラウザに関しての初期化ではありません。
繰り返しますが、ul,li 両方のmargin,padding 指定です。必ずしも これで巧くいくわけではありません。

理由は単純、それで巧くいくことがあるから、です。なぜなのかは不明です。

他に思いつく方策は・・・そうですね、font-sizeを指定、そのfont-sizeに等しい背景画像にしてしまえば如何でしょうか。

回答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を対象としておりハックでの処理が難しいので悩み中という現状です。
背景画像での表示が無理そうなら何か代替案をご教授いただきたく…。

回答No.2

goldfox

back-ground-　ではなく
background-　が正しいと思いますが。

doctype宣言で標準モードを選んでみてはいかがでしょう？
http://www.tagindex.com/html_tag/page/doctype.html
（StrictやTransitionalのURLつき）

補足

失礼しました、書き間違いです。
実際のソースはbackground-で記述しています。

省略してしまいましたがdoctype宣言は標準準拠モードにしております。

回答No.1

SAYKA

line-heightとかじゃなくてvertical-alignじゃないのかな

補足

vertical-alignが何に絡んでいるんですか？？