2011年10月7日金曜日

IE6、7でリストにfloatを使うとリストマークが表示されない

IE6、7でリストにfloatを設定するとナカグロ(・)が表示されなくなる。
list-styleで設定した行頭文字が表示されなくなるのはIE6、7の仕様らしい。
根本的な解決法はたぶんないと思われるが、それでは納得しないクライアントのために、CSSハックでIE6、7だけは画像で表示する、という方法はどうだろう?

サンプルソース(CSS)
#hoge li {
*background:url('/img/disc.gif') no-repeat 0 5px;
*padding-left:15px;
}

サンプルソース(HTML)
<div id="hoge">
<ul>
<li>hogehoge</li>
<li>fugofugo</li>
</ul>
</div>