IE7の画像の隙間とネガティブマージン

FC2に移転した「ぱろでい日記」のサイトデザインをしておりまして、またもやIEの仕様にやりこめられました。

問題となったのは、2点。

まずは、背景画像を設定するため、スペースのみを入れた空白のブロック。高さが1px増えてしまい続くブロックとの間に1pxの隙間ができてしまいました。

もう一点は、ネガティブマージン（マイナスのマージン）を設定したブロックが削れてうまく表示できない事態。

いずれも解決しましたが、IE以外ではキレイに表示できるのに、なんでIEは・・・。

今回のトラブルは、いずれもIE7（IE8のIE7互換表示）で発生したものです。

正直、自分の設定方法が変だったのでしょう。

問題のソースはこれ

HTML

<div class="header">&nbsp;</div>
<div class="content">コンテンツ</div>

CSS

.header {
  background-color: #F00;
  height: 6px;
  font-size: 0.1em;
  line-height: 0;  }

.content { background-color: #F00; }

これを表示すると、空白行の最初のブロック（header）と次のブロック(content)との間に、1px の隙間ができてしまうのです。

IE8の互換モードで表示するとこうなってしまいます。

IE8の通常モードやFirefoxで表示すると、ちゃんと隙間なく表示されます。

line-height: 0; が問題だったらしく、これを削除したら、隙間が無くなりました。最初のブロックのDIVの間のスペースを削除して、完全に空の、文字の無い状態にしても隙間が消えます。

まぁ、height を設定して、0.1emの高さの空白しかない行に、さらにline-height を上からかぶせるのも念が入りすぎかもですよね。

なんでこんなに念には念をいれてしまったのかと申しますと、背景画像を設定しないプレーンなデザインにしたい時の事を考えて、background-image と画像のheight を削除したら、この行が表示されないようにしたかっただけなんですよね。

もう一点は、背景画像で表示しているブロックの上下の角丸の枠組みを、画像を表示するブロックだけ非表示にしたかったんです。

マイナスのマージン（ネガティブマージン）を使って、角丸画像を指定しているフッタ部分を、バナー画像の内側に引きずり込んで表示させないようにしようとしたところ、引きずり込んだネガティブマージンの分だけ、画像が欠けてしまったんですね。

こちらは、その画像がある親要素に、

position: relative;

を設定することで回避できました。

IEさん！いろいろと難しいね！！！！