1. TOP >
  2. 運営者紹介 >
  3. 運営者ブログ >
  4. floatに関するバグ解決法 ~左余白が倍になってしまう場合~

運営者ブログ

floatに関するバグ解決法 ~左余白が倍になってしまう場合~

IEでは、floatとmargin-leftを同時に指定すると、指定した数値の倍の余白が空いてしまうバグがあります。そのため、ピクセル単位でページ構成している場合は、さらにdivで囲ったりと余計な手間がかかってしまうこともあります。

この対処法はfloatしたボックスに対して、inlineを指定することで簡単に解決します。

CSS

div {
 width:300px;
 margin-left:10px;
 float:left;
 display:inline;
}

上記のように「display:inline;」がなければ、IE表示では左余白は20ピクセルになってしまいます。ピクセル単位で構成されたページでは、この対処法を知っているか知らないかでは制作面に大きな違いが出てきます。簡単な方法ですので是非、ご活用ください。