blockquoteの後ろがずれていく件

昨日の記事を投稿してからInternet Explorerでトップページを見てみると、下に行くほど記事が左にずれる謎の現象に見舞われていた。

2007年に自宅サーバに移転した際にも同様の現象が発生しており、ずっと悩み続けていたのだが、その原因が「blockquote要素にpaddingとborderを指定すると後続の表示がずれる」というIEのバグだったとわかった。1年越しに問題解決できたのでやり方をメモ。

参考にしたサイト:

• blockquoteでIEのバグ？ – Internet Zone::WordPressでBlog生活
• 引用タグ＜blockquote＞の後がずれる件について。（改） – 我楽
• IT Fun: IE CSS そして blockquote

blockquote {
	clear: both;
	margin: 3px 0;
	padding: 8px 12px 2px 12px;
	border-left: 4px solid #cccccc;
	background: #f0f0f0;
	line-height: 160%;
}

このborder-leftだけを指定してるのがまずいらしい。そこで次の3行を追加。

blockquote {
	clear: both;
	margin: 3px 0;
	padding: 8px 12px 2px 12px;
	border-left: 4px solid #cccccc;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	background: #f0f0f0;
	line-height: 160%;
}

こうすることで見た目の表示をほとんど変えずに対処できた。結構有名なバグのようだが、ずれる原因がまさか引用タグだったとは。