February 16, 2009

Firefoxは</li>の後に があるとページが崩れる。

本題に入る前に

このブログの一番下にページのナビゲーターがあります。
前まではIE以外で閲覧した場合、崩れた状態が表示されたのですが
今回修正が完了しました。

Firefoxは</li>の後に&nbsp;があると崩れる。

実際に見る

このデモをIE6で見ると、きれいに数字が横に並んでいます。
しかし、Firefoxで見た場合、ずれていることが確認できます。

ソースを見る

ソースは以下のとおりです。
(</li>の後に空白があることを確認してください。)

<li>をCSS で float: left; して横並びさせ、数字の間隔を margin で空けています。

何故、</li>の後に&nbsp;があるのか。

おそらく</li>の後に&nbsp;を書く人は、まずいないと思います。今回、僕が</li>の後に&nbsp;を置いてしまったのは、Movable Type でページ分割をする際に必要となった PageBute の説明をきちんと読んでいなかったからです。

<$MTPageLists$> 各ページへのリンクを指定します。
delim="*"
MTPageListsのアトリビュートです。ページ番号とページ番号の間の区切りの指定が可能です。指定しない場合は &nbsp; が入ります。

修正方法

</li>の後に&nbsp;を入れなければ、この問題は回避できます。

ですので、今回のケースでは PageBute の解説にあった「delim を指定しないと &nbsp; が入る」といったところを何とかすればいいことになります。

修正前 (Movable Type 上でのコード)

修正後 (Movable Type 上でのコード)