google chrome で li の list-style-ima

質問

google chrome で li の list-style-image が表示されない。

IE と Firefox では表示されます。同じような体験から解決された方いらっしゃいましたら、ご教授願います。

回答No.1

kuzumiHK · ベストアンサー

chromeでも、list-style-imageは問題なく表示されるようです。
考えられる原因は、marginやpaddingのマイナス指定、
liタグのdisplay:inline、画像パスの指定ミスなどがありそうです。

ちなみに以下の指定だとどのように表示されるでしょうか。

li{
margin:3em;
padding:3em;
list-style-image: url(hoge.gif);
border:1px solid #f00;
}

<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

また、list-style-imageは、現在のブラウザ実装状況では、
表示位置がずれたり、ずれた位置を調整する機能がなかったり不便なことが多いため、
背景画像で代用するケースが多いようです。

http://css.hp-advance.com/category/p_6.html

お礼

アドバイスありがとうございます。

li{
margin:3em;
padding:3em;
list-style-image: url(hoge.gif);
border:1px solid #f00;
}

と記載してアップすると IE では赤枠内に画像が表示されるのですが、
chromeでは赤枠外に画像が表示されてしまいます。

補足

list-style-position:inside ;

で、画像が枠内表示され、意図する結果になりました。

ありがとうございました！！！！