てんぽ: blockquoteでずれる?

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

blockquoteでずれる?

2005年07月08日(金)

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

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

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

~中略~

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

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

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

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

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

#28
カテゴリ:HTML・CSS
タグ[ CSS HTML メモ IE ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/28-8670ec49

<<「こちら」リンクは損!? | 汎用テンプレート>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。