list-style-typeを任意の文字にしたらずれた

HTML CSS メモ

HTMLのリスト(uiとかol)で、list-style-typeを好きな文字にしたい時、こんな方法が楽。
(※ただしIE8以上に限る：:before擬似要素)

li { list-style:none; }
li:before { content:"★"; }
リストマークを任意の文字にする


全般的に対応させるとなると、下記みたいな書き方になる。

<ol class="num1">
    <li><span>[1]</span>カッコ数字をリストで使う</li>
    <li><span>[2]</span>カッコ数字をリストで使う</li>
    <li><span>[3]</span>カッコ数字をリストで使う</li>
</ol>

/* num1 */
ol.num1 { margin-bottom: 1.4em; margin-left: 2.5em; }
ol.num1 li {
	position: relative;
	list-style: none;
	line-height: 1.4;
	margin-bottom: 0.3em;
}
ol.num1 li span {
	position: absolute;
	top: 0;
	left: -1.7em;
}
* html ol.num1 li span { top: -0.1em; } /* for win ie6 */
*:first-child+html ol.num1 li span { top: -0.1em; } /* for win ie7 */
olタグでカッコ数字や丸数字を使う | A Day in the Life


で、書いた(IEのcssハック除く)はいいものの、IE6・IE7・IE8・IE9で確認してみると、spanのところが縦にずれていた。
こういう話らしい。

hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。
hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。
(中略)
前述した拡大・縮小時にレイアウトが重なってしまったり、フロートした要素がはみ出てしまったりするバグは、このhasLayoutの値がfalseの場合に起きます。
これらのIEでのCSSのバグを回避するためには、hasLayoutの値をtrueにする必要があります。
(中略)
IEのCSSでのバグを回避するためには、例えば「height」の値に「1%」を指定し、「hasLayout」の値を「true」にして回避します。
上記の表の中でよく使用されているものは「height="1%"」や「widthの値を指定する」などがあります。

IEでのCSSのバグを回避するhasLayout | コリス

IEに対して対応するには以下のような方法があります。
width:100%を指定する
親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。

親要素にwidth:100%を指定したら、ちゃんと表示された。

position:absoluteにしたときにIEで位置がずれることの対応 - まんぞうブログ