IEに対応した※リストのCSS

※から始まるリストのスタイリングについて。よくある（？）方式だと2パターン思い当たります。

cssでlist-style-typeをnoneにした<ul>のリストを定義し
<li>の左マージンを1文字ぶん設けておいて、first-letterだけ左に1文字ぶんのネガティブマージンを設定する方法。

<ul>
	<li>※こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！</li>
	<li>※こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！</li>
</ul>

#sample-pt1 li {
	margin-left: 1em;
	margin-bottom: 0.5em;
}
#sample-pt1 li:first-letter {
	margin-left: -1em;
}

ただし、このやり方がIEで効かない…orz
IEだけは折り返した行の先頭にインデントが入りません。

というわけで出てきたのが、<dl>を使った方式。
※を<dt>で、本文を<dd>で囲って
<dt>にはfloat:leftを、<dd>はフロートせず左マージンを1文字ぶん設けるやり方です。

これならIEでも折り返した行の先頭にインデントが入ります。

<dl>
	<dt>※</dt><dd>こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！</dd>
	<dt>※</dt><dd>こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！</dd>
</dl>

#sample-pt2 dt {
	float:left;
	margin-bottom: 0.5em;
}
#sample-pt2 dd {
	margin-left: 1em;
	margin-bottom: 0.5em;
}

というわけで、IEサポート案件で※リストが出てきそうなときは
dl方式の方を使うようにしようと思います。