first-letterのバグ

注釈（※）などをインデントするにあたり、いろいろトラブったのでメモ。

■margin-leftを使うとIE6でボックスサイズが広がるのでプラス側はpaddingにする。

p.indentA01 {
	margin-left: 0.7em;
}
p.indentA01:first-letter {
	margin-left: -0.7em;
}

を下に変更

p.indentA01 {
	padding-left: 0.7em;
}
p.indentA01:first-letter {
	margin-left: -0.7em;
}

■似たクラスを続けて記述すると、スタイルが効かなくなるのでバラして記述する。

div.captionA01 p.indentA01,
div.captionA02 p.indentA01,
div.captionA01 p.indentA01r,
div.captionA02 p.indentA01r {
	padding-left: 0.7em;
}

を下に変更

div.captionA01 p.indentA01,
div.captionA02 p.indentA01 {
	padding-left: 0.7em;
}
div.captionA01 p.indentA01r,
div.captionA02 p.indentA01r {
	padding-left: 0.7em;
}

IE6が本当に使えない。
あとUTF-8で※が文字化けするのってどうやって回避するんだろ。