MovableType3.2のデフォルトのテンプレートは、インターネットエクスプローラー(IE)6で見るのと、Firefoxで見るのでは、いきなりフォントの大きさが違っています。
せめて、この2つのブラウザでの見え方はある程度同じになって欲しいものです。
そう思って、スタイルシートを変更してみました。
まず実際の表示の差を見てみます。
サイドバーの部分。

続きを読むの部分。
![]()
投稿者やコメント、トラックバックへのリンクの表示部分。

と、このような表示の差になっております。
スタイルシートをみると、MT3.2のデフォルトのテンプレートでは、フォントのサイズは全てピクセル(px)で指定してあります。
スタイルシートを変更して思ったのですが、どうやら小さいフォントの表示のされ方が、IE6とFirefoxで違う事によってこの差が生じているようです。
Firefox、小さいフォントを小さく表示しすぎという感じです(笑)。
スタイルシートで、font-sizeが10pxとか11px指定されているものを、フォントサイズを12pxに指定すると表示の差が出なくなるみたいです。
実際にやってみました。
メイン・メニュー > 環境設定 > テンプレート > スタイルシート
スタイルシートの下記の部分を変更してみました。
割と適当ですので、ご参考程度にされて下さい(笑)。
カテゴリーやトラックバック、コメントなどのヘッダー部分。
.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header
{
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
w\idth: auto;
margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px→12px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}
追記の部分。投稿者やコメント、トラックバックへのリンクの表示部分。
.entry-more-link,
.entry-footer,
.comment-footer,
.trackback-footer,
.typelist-thumbnailed
{
font-size: 11px→12px;
}
日付部分(あんまり見た目は変わりませんが、一応ここも変更)。
.date-header
{
margin-top: 0;
font-size: 11px→12px;
font-weight: bold;
text-transform: uppercase;
}
投稿者やコメント、トラックバックへのリンクの表示部分。
なぜか2ヶ所あるのでこちらも変更。
.entry-footer,
.comment-footer,
.trackback-footer
{
margin: 0 0 20px 0;
border-top: 1px solid #dae0e6;
padding-top: 3px;
color: #666;
font-size: 10px→12px;
text-align: right;
}
トラックバックURLの表示部分。
#trackbacks-info
{
margin: 10px 0;
border: 1px dashed #a3b8cc;
padding: 0 10px;
color: #292e33;
font-size: 11px→12px;
text-align: center;
background: #e6ecf2;
}
サイドバーの中身の部分。
.module-content
{
margin: 0 0 10px 0;
border-top: 1px solid #cfd4d9;
padding: 10px 10px 0 10px;
font-size: 10px→12px;
line-height: 1.2;
}
検索窓の中の文字の大きさ。
.module-search input { font-size: 10px→12px; }
ついでに、エントリー本文の文字の大きさを14pxに指定して、行間(line-height)をちょっとだけ縮めてみました。
.entry-content,
.comment-content,
.trackback-content
{
margin: 0;
font-size: 14px;
line-height: 1.5→1.4;
}
また、文字の色を少しだけ濃くしてみました。
#666(薄い灰色)→#333(濃い灰色)
color: #666→#333;
そういうわけで、修正後はこんな感じになります。

<関連エントリー>
・MovableTypeのfontのサイズはブラウザによって表示のされ方が違う
@ 2006年02月12日