Home > CSS > [ CSS ] IE で垂直マージンが相殺できないバグ

[ CSS ] IE で垂直マージンが相殺できないバグ

  • 投稿日 : 2007-05-29
  • 更新日 : 2008-09-29
  • CSS
  • + +

Internet Explorer は width 指定があると、垂直マージンが相殺できないみたい。

CSS のソース

#main {
  width: 100%;
}
#menu {
  margin-top: 1em;
}
#main p {
  margin-bottom: 1em;
}

HTML のソース

<div id="main">
  <p>段落 1</p>
</div>
<div id="menu">
  <p>段落 2</p>
</div>

Internet Explorer 7.0 での表示結果

Internet Explorer 7.0 での表示結果

Firefox 2.0 での表示結果

Firefox 2.0 での表示結果

問題となるブラウザ

  • Internet Explorer 7.0
  • Internet Explorer 6.0
  • Internet Explorer 5.5

ハマったよ。orz

バグの回避方法を考える。

Comments:3

(ai) 07-09-05 (水) 18:13

中の要素に問題がなければpタグに
display:inline
を指定するとかで回避できるかな

Bowz 07-09-05 (水) 21:39

コメントありがとうございます。
ちょっと検証してみます。

Bowz 07-09-06 (木) 20:11

#main p に display: inline; を追加すると正常な表示になりました。ありがとうございます。

コメントフォーム

お気軽にコメントをどうぞ! コメントを頂けると管理人が喜びます。

情報を記憶しますか?

Trackbacks:0

Trackback URL for this entry
http://bowz.info/964/trackback
Listed below are links to weblogs that reference
[ CSS ] IE で垂直マージンが相殺できないバグ from Bowz::Notebook

Home > CSS > [ CSS ] IE で垂直マージンが相殺できないバグ

Feeds
Meta
あわせて読みたいブログパーツ

Return to page top