読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

ダブルマージンフロートバグに遭遇

CSS

なんか、IE6だと余白が広い気がするなーと思ったらバグでした。
「ダブルマージンフロートバグ」と呼ばれるものらしい。名前がつくくらいなので有名なバグなんだろうなー。
詳細はCSS Radar - IE ダブルマージンフロートバグをFixが詳しいです。

対策

「display:inline;」とすると回避できるとのこと。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      div.outer {
        width: 100px;
        height:100px;
        border: 1px solid #aaaaaa;
        margin: 20px;
      }
      div.inner, div.inner2 {
        float:left;        /** フロート要素だと */
        margin-left: 10px; /** マージンが2重に適用される */
        width: 50px;
        height: 50px;
        background-color: #CC3366;
      }
      div.inner2 {
        display: inline;  /** displayをinlineにすると回避可能。 */
      }
    </style>
  </head>
  <body>
    <p>■IE6だと左のマージンが20pxになる。</p>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <br/>
    <p>■display:inlineにすると直る。</p>
    <div class="outer">
      <div class="inner2"></div>
    </div>
  </body>
</html>

確認はこちらから