昨日の記事を投稿してから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%;
}
こうすることで見た目の表示をほとんど変えずに対処できた。結構有名なバグのようだが、ずれる原因がまさか引用タグだったとは。
- ひとつ前の記事: ルータ越しのWake-On-LANがうまくいかない
- ひとつ後の記事: IEだとfooterが4px縮んでいる
- コメント
-
お気軽にコメントください。投稿したコメントは管理者の承認後に表示されます。
Twitter経由でのコメントも大歓迎です。タイトル横の「retweet」ボタンからどうぞ。こちらはほぼリアルタイムに反映されます。
- トラックバックURL
-
いただいたトラックバックは、原則ブログ上には表示されません。情報提供にどうぞ。
