CSS:

IE5.x/IE6でmarginが指定値より大きくなる

IE5.x/IE6で、floatで左右どちらかに寄せているボックスにmarginの値を指定すると、指定値の2倍程度のmarginが設定される。

対応方法

  • ボックスを追加してfloatを指定していないボックスにmarginを指定する
  • 背景画像が指定されていない場合は、paddingで対応
  • IE限定バグの為、アンダースコアハックで対応

アンダースコアハック

通常、プロパティの前にアンダースコア(_)が入ると、CSS2では定義されていないプロパティであると認識されて無視されるのですが、Win IEでは読み込んでしまうバグを利用したCSSハック。

div { flort : left; margin: 20px; _margin: 10px; }

上記では、Win IE以外はmarginが20pxで表示される。 WinIEでは「_margin: 10px;」で上書きされ、指定値10pxとなるが、floatのバグでレイアウト上のmarginは20pxに見える。

background-image で指定した画像が印刷されない

Internet Explorer(Windows)で、backgroundで指定した画像が印刷時に表示されない。background-repeatプロパティにrepeat以外の値が指定されている場合に起きるバグ。

h2{ background:url(hoge.gif) no-repeat; }
widthプロパティまたはheightプロパティを指定することで回避できる。

IEで画像の下に謎の隙間が出現

中身が画像だけのブロックをIEで見ると、その下のブロックとの間に微妙な隙間が空く。これはインライン要素であるimgにbaselineが適用されているため。
display:block を指定すると、ブロック要素として表示されるようになり、この微妙な隙間がなくなる。

img { display:block; }