2006年12月10日（日） コメント:2 トラックバック:0
li要素の内容が半角英数文字で、li要素にdisplay:inlineが指定してあり、なおかつli要素のソースコードに改行や空白文字を含まない場合、
連続する半角英数字が改行されない問題が生じます。
li {display:inline;}
<ul>
<li>hankakueisuu</li><li>hankakueisuu</li><li>hankakueisuu</li>
</ul>
ソース内でli要素ごとに改行すればいいのですが、 FC2ブログのテンプレート用ブロック変数では繰り返し単位ごとに改行コードは挿入されない（参照：見えないところも見やすく）ので、 li要素の繰り返し部分に上記の問題が生じ得るわけです。 （ただし、この仕様はIE6のブロックボックス化した要素を含むリストアイテムの後ろに空行が入るバグへの対処法として機能している面もある。）
この問題への対処としてはli:after {content:" "}のように、after擬似要素を使ってli要素の後ろに空白を挿入する方法があります。
とはいえ、IEは7になってもafter/before擬似要素に対応していないので、これだけでは不十分なのですが。
コメント（2件）
こんにちは。
自分も Tag Cloud をリストタグでマークアップするときにこの問題に遭遇しました。そして回避策を見つけました。li要素ごとに改行しなくても、
<ul>
<li>hankakueisuu
</li>
</ul>
このようにli要素内に改行を入れることで回避できました。スタンダードなブラウザはこれでOKみたいです。なぜこれで大丈夫なのか理由は分かりませんが・・・
まさにこれはli要素でマークアップしたタグクラウドを想定した問題でした。
終了タグの直前での改行のほかにも半角スペースを入れる手もありますね。ただ、W3C勧告の中には以下のような記述があります。
「開始タグ直後の行区切り及び終了タグ直前の行区切りは共に無視すべきである」
「著者は、ユーザエージェントが開始タグ直後または終了タグ直前の空白類をレンダリングするとは期待しないようにすべきである」
（http://www.w3.org/TR/html401/struct/text.html#h-9.1）
つまり、その回避策が有効なのはブラウザの実装がこの規則を守っていないためだと思います。
また、MacIE5を無視していいなら、display:inlineの代わりにfloat:leftを使ってもいいかもしれません（CSS2.1ではwidth:autoのフロートの幅は内容物に合わせて縮められる。MacIE5以外のモダンブラウザの実装もそうなっている）。