blockquote に padding-bottom

実は少し前からこのブログで書いた記事をよりちゃんとしたマークアップされた文章にするべく、sbの保存設定を「そのまま」にして段落ごとに<p>や<ul>、<dl>などですべて修正していました。
(「自動改行」では<br />が連続したり、余計なところにもはいってしまうので・・・)

その修正中に見つけたんですが、IEにおいて<blockquote>の中の文章に<p>や<ul>などを入れると、その後のコンテンツが左にずれ込んでいくという事態が起きました。・゚・(ノД`)・゚・。

なんかブロック要素を入れるとダメらしかったので、とりあえずblockquoteの中の最後をインライン要素で終わらせるようにして回避していたんですが、このバグについて言及されている記事を発見したので、メモしておきます。

もうね、blockquoteの度にもうどんどんずれ込んでいきますよ・・・_| ̄|○
これはIEのCSSのバグだそうです。

症状

最後の子要素が非匿名ブロックレベル要素である要素の四方にパディングを設置し、さらに左または右にボーダーを設置すると、その要素に後続する要素の内容物がボーダーを設置した方向にずれてしまう。

実際はこういう条件下で起こるらしいですねぇ

これを回避するには、blockquote要素のpadding-bottomを指定しない(0にする)ようにすればよいそうです。

ということでblockquoteのpadding-bottomを0にして、かわりに中のpでpadding-bottomを1emにして無事解決できました!

今回このバグを教えていただいたサイトさまです。

ありがとうございました!

ちなみに前回のSerene Bach導入の失敗の原因も親切な方々のおかげで解決されそうですので、現在は移行のためにテンプレートをSB2仕様に修正しています。
はやく(といっても慎重にね)移行したいです。ハイ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA