IEにおけるpre表示幅の不具合を回避する

少し前の話ですが、うちのblogを表示させてみると右側サイドバーが中央カラムに押し出されて下に落ちてしまう症状が出ていたので、ちょこっと調べてました。
標準ブラウザーとしているFirefoxではその様な症状が出ていなかったのでまたしても気付くのに時間が掛かってしまいました。

・・・どうやらMT4.2でCAPTCHAを利用できるようにするのエントリー内でhtmlコードを表示させるのに使った<pre>要素の表示幅がFirefoxとIEとでズレがある様で、IEでの表示時に私の思惑以上に幅が広がり、中央カラム幅内に収まり切らない故の結果みたいです。

MTのテンプレート内、スタイルシートの中にpre要素の表示スタイルを指定する箇所を見つけたので少々いじってみたところ、問題が無事解決されました。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #f6f6f6;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
     overflow: scroll;
}

赤字の部分が幅指定の箇所。　これを、

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #f6f6f6;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 85%;
     overflow: scroll;
}

にしてみたところ、<pre>要素の表示が中央カラム内に収まる幅になりました。

・・・IE、曲者だ・・・（泣

参考･･･hail2u.net：　pre要素へのスタイル指定

コメントする