MTの最近ブログ記事が崩れる

Movable Typeのワインレッドなどのデフォルトテンプレートでブログを作成すると、最新記事のリストが崩れて見えてしまうことも多いのではないでしょうか。
Firefoxで見るときれいに表示されているのに、IEで見ると大きめに表示されてしまうことがあるかと思います。

この原因についてですが、いわゆるIEバグが関係しているようです。
IEのブラウザでは、11pxの日本語フォントを12pxぐらいに大きく表示してしまうバグがあり、他のブラウザではきちんと表示されていても、IEで見ると崩れてしまったりするわけです。

つまり、firefox:11px;=ie:12px;という図式が成り立つのかもしれません。

このIEバグはおそらく、日本語フォントの場合だけだと思うので、外人さんがMovableTypeのデフォルトテンプレートを使っていても特に問題はないのだろうから、特に修正されることもなく使われているのだろうと考えております。

これを回避するには、IEバグを回避するようにスタイルシートに書き直す必要があるわけですが、これに手を出すとどつぼにはまりそうな気がしてしまいます。
firefoxで11pxに指定しつつieでハックする、もしくは、ie用に10pxで指定しつつfirefoxなどをハックする、などなどいろいろ考えられるわけですが、そのどれもが四苦八苦しそうな気もしてしまいます、ieハックだけに。

そんなわけで、いっそのことシェアの多いieに最適化して、firefoxやchromeは多少見えずらくなってもいいじゃないかっていう方法をとるのが一番安易な解決策かと思います。
この場合、プロやクラシックなどのバージョンによる違いがあるかもしれませんが、プログテンプレートの管理で、スタイルシートの最後に次の2行を付け加えるだけです。

.widget-content ul li{ font-size:10px; }
.widget-content p{ font-size:10px; }

この場合、ieではちょうどよい大きさになりますが、firefoxなどでは多少ちいさめの大きさになってしまいます。
ただ、現状、ieのシェアが5割程度はありますので、ブログ訪問者の二人にひとりはある程度は改善された形で表示されるはずです。
残りの人には、ちょっとちいさいかなぐらいの大きさになるはずですので、ある程度はぶなんな感じになるのではないかと思います。