通常、番号リストの場合は
<h1>好きなセリフtop3</h1>
<ol>
<li>早く持って来いッ！！スチュワーデスがファースト・クラスの客に酒とキャビアをサービスするようにな…</li>
<li>我が…止まった時の世界に……入門してくるとは…………！！</li>
<li>悪いがおじいちゃん、およびじゃあないぜ</li>
</ol>
と、順序リストを使用したりしますが、その際にIE6、7でリスト番号が表示されない問題にぶち当たりました。
■状況
<blockquote>で囲まれた引用文の中で原文そのまま番号つきの箇条書きにしたら、IE6、7のみ番号が表示されない状況になった。
■解決策
いくつか発生条件によって解決策があるみたいです。
- liにwidth/float/clearは、指定しない
- liにzoomを指定しない
- list-style:inside;にしてみる
IE独自仕様cssのzoomを指定してる時に色々問題が起きることが多いようです。
ただ、zoomを指定していなくても起きる時はおきます。
それがIEクオリティ。
そんな時に3番目の『list-style:inside;』を試してみましょう。
デフォルトでは『list-style:outside;』の状態になっていて、番号や記号が要素の外側に表示されるようになっているのですが、『list-style:inside;』を指定することで、要素の内側に番号や記号を表示させることが出来ます。
あまり使うことがないので、意外と知らない人も多いのではないでしょうか。
私の状況の場合はこれで表示されるようになりました。
なぜかは・・・よく解りません；；
ちなみに私の場合は、箇条書きで番号を表示したいけど順番があるわけではないので<ol>を使わず<ul>に『list-style-type:decimal;』を指定して表現してました。
ulの幅を固定してoverflow:hidden;によってはみ出した部分が見えなくなるような処理もしてないし、試しに少しmargin-leftを使って内側に表示させてみましたが関係ありませんでしたね。
IEの謎は広大だわ・・・。