lionusの日記(旧はてなダイアリー)

「lionusの日記」http://d.hatena.ne.jp/lionus/としてかつてはてなダイアリーにあった記事を移転したものです。

引用の罠。

今日登校して,学校のPCで自分の日記を開いたらびっくり。

日記本文の右に表示されるサイドバー(プロフィールやカレンダー等が表示される部分)が見えません。画面を下スクロールすると,サイドバーが日記本文の右下に行ってしまっています。
lionus自宅ではFirefoxを主に使っていて,自宅PC上ではこんな風に見えていました。

学校ではIEコンポーネントを使ったタブブラウザのひとつであるSleipnirを使っているので,IEでは見えないのだと理解しました。念のためIE6でも確認しましたが,同様にサイドバーは「正常」に表示されませんでした。
ヘルプページの「日記の横にサイドバーを表示する」などを参照して,あれこれ試したのですが,サイドバーそのものが表示されなくなったり,うまくいきませんでした。
帰宅して,IE6とFirefoxでの見え方を再度比較してみたところ,ひとつ気が付いたことがありました。
引用部分に長いURLが含まれた場合の表示です。
問題の部分は3月30日の日記ですが,Firefoxでは引用部分内で折り返されずはみ出した形になっています(赤線部分)。

一方,IE6では,折り返されないだけでなくはみ出しもしないため,つっかい棒のような作用をして日記本文部分の表示幅を広げてしまっています(赤線部分)。

これを見て,引用部分(blockquote)の設定が問題なのではないかと思いました。
デザインテーマ「Bird」のCSSファイルを参照したところ,このあたり

div.section blockquote{
padding-left:5px;
border-left:5px solid #94c23a;
}

が怪しそうだと思いましたので,このページを参考に,次のようにword-breakプロパティを加えてみました。

div.section blockquote{
padding-left:5px;
border-left:5px solid #94c23a;
word-break:break-all ;
}

多分これで大丈夫なはずです。自宅のIE6とFirefoxでは一応思うように見えています。