てんぽ : blockquoteでずれる？

• FC2ブログ サポートフォーラム- ３カラム公式テンプレートのデザインの崩れ

IEにはblockquoteがらみの有名なバグが多数あります。他記事を引用する際にblockquoteタグを使っていて、そのblockquote内にpタグを使ってたりすると、IE（古いネスケも？）で表示が崩れます。

これは初めて知ったので調べてみました。どうやらMovableTypeを使っているサイトでこの現象がよく起こっているみたいです（検索結果の上位がMovableTypeの話題ばかり）。

• ほぼ日刊 野狐禅: blockquoteに関する不具合

pタグで囲まれた範囲内にblockquoteタグを使用すると、blockquote以後のスタイルシート設定がすべて無効になることが判明。

〜中略〜

MovableTypeの場合、本文を表示するMTEntryBodyタグは自動的にpタグを吐き出すので、本文中にblockquoteを使うと必然的にずれることになる。

そもそもp要素の内容にblockquote要素を書くことは文法上できないので、それで表示がおかしくなるからといってIEをせめることはできないと思います。というわけで、HTMLの文法はちゃんと守りましょうね。おしまい。

……というのは冗談で、MovableTypeの実装上の問題のほかに、本当にIEのバグによって表示がずれることもあります。

• 左右ボーダーとパディングを設置した要素に後続する部分がずれる(5.5/6.0)

「左（右）にborderを、かつ四辺にpaddingを指定する」のはblockquote要素のスタイルとしてありがちなので、blockquoteを使ったときによくこのバグが起こるようです。実際にはblockquote要素に限らずul要素などでも起こります。

回避方法としてはバグ辞典に載っているもののほかに、「幅を明示する」などもあります。幅の明示はIEの他の多くのバグにも有効なので、IEのバグに引っかかったらまず試してみるといいでしょう。