blockquoteの後ろがずれていく件

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

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

参考にしたサイト:

うちのblockquoteのCSS指定は次の通り。

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%;
}

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

あくあぽ

三度の飯よりドラえもん・ガジェット・ゲーム・アニメ・イラスト好きなサラリーマン。Windows/Mac両刀遣い。仕事柄Linuxも触ります。好きなコトバは「迷ったら高い方を買う」「値段が同じなら両方買う」

あくあぽをフォローする
ソフトウェア関連
この記事をシェアしてくださいねっ
aquapple