list-style-image・・マーカーとコンテンツの距離

質問

縦横15ピクセルのmarker.gifを使って、リストのマーカーに指定したいのですが・・・

たとえば、このようにすると、

ul {
margin: 0px;
padding: 0px;
}

li {
background-color: lightgrey;
margin: 0px 0px 5px 15px;
padding: 0px;
list-style-image: url("marker.gif");
list-style-position: outside;
}

IEやOperaでは、マーカーのすぐ左にコンテンツ（灰色の背景色つき）がくるのに対して、
Firefoxでは、マーカーとコンテンツの間に何ピクセルか隙間ができて、結果、マーカーが親エレメントより左側にはみ出してしまいます。

CSS2の仕様をしらべると、「marker-offset」というプロパティがあるようなのですが、まだブラウザが未対応のようで・・・

この隙間は、どういう定義なのでしょうか？規定値が決まっていたりするのでしょうか？
また、変更することはできないのでしょうか？

回答No.1

steel_gray · ベストアンサー

marker(というよりリスト)周りについてはブラウザで実装されていなかったり実装に解釈の違いがあったりして残念ながらうまく活用できないのが現状です。

リストの行頭に画像を付けたい場合、positionやrepeatなんかと合わせてbackgrond-imageとして表示させる（背景画像はされないケースがあるとか、これはこれで問題もありますが。）か、
cssですらなくなりますが<img>とした方が無難なようです。

お礼

なるほど・・そういう事情だったのですね。
背景画像の方法でうまくいきました。これでいこうと思います。
ありがとうございました！

回答No.2

noname#19206

参考リンクを見ればどういうことであるかの事情と対処法が分かるんじゃないかと思います。

参考URL：

http://www.mozilla.gr.jp/standards/webtips/webtips0034.html