わるいおもいで

<ul class="archive">
<!--archive--><li><a href="<%archive_link>"><%archive_year>-<%archive_month></a></li><!--/archive-->
</ul>

以上のような HTML に

ul.archive li {
 display: inline;
}

こうスタイルを指定すると、Firefox でリストが幅に従って折り返されず横方向にびろーんと伸びてしまう。長い URL が折り返されないバグが影響しているっぽい。

原因はよくわからないけど、<!--archive--> が出力された際に

<li><a href="hoge">2005-07</a></li><li><a href="hoge">2005-08</a></li><li><a href="hoge">2005-09</a></li><li><a href="hoge">2005-10</a></li>

こんな風に一続きになっていた <li> を改行してやったらきちんと折り返された。とはいえ、リストが改行されないのは FC2ブログの仕様なのでこれは解決法にならない。

バグを回避するため、2005-10 (0)と余計なものを付け足したり2005年09月みたいに全角文字を入れたり色々やってみた（で成功した）んだけど、ふと思いついて HTML をいじらず CSS で

ul.archive li:after {
 content: " ";
}

と指定したら何事もなく折り返された。なーんだ。

ただ、after 擬似要素をサポートしていないブラウザだとリスト同士の間隔がゼロになる恐れがあるので、li の左右にマージンを与えておいた方がよさそう。

自分では試してないけど、この現象、カテゴリー名が英数字だったら <!--category--> 変数でも発生するのかな。