【特集】

正式版完全対応! Internet Explorer 7 CSS攻略法

11 03-07 修正/未修正バグの問題を回避する(5)

    エ・ビスコム・テック・ラボ　 [2007/01/18]
    印刷

    フロート要素の上下マージンがなくなる問題

    IEでは、ブロック要素にfloatプロパティを指定すると、デフォルトスタイルシートで挿入される上下マージンが消えるという問題が発生する。IE7でもこの問題は修正されていない。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-9 sample03-05-09.html

    h1         {background-color:yellow}

    #container {background-color:cyan}

    #image     {float:left}
    <h1>見出し</h1>

    <div id="container">

    <p id="image">
    <img src="image.png" width="85" height="85" />
    </p>

    <p id="text">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>

    </div>

    この問題は、floatプロパティを適用した要素に対し、マージンを指定することで回避することができる。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-10 sample03-05-10.html

    h1         {background-color:yellow}

    #container {background-color:cyan}

    #image     {float:left;
                margin-top:1.33em;
                margin-bottom: 1.33em}
    <h1>見出し</h1>

    <div id="container">

    <p id="image">
    <img src="image.png" width="85" height="85" />
    </p>

    <p id="text">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>

    </div>

    フロート要素と隣接する要素のマージン相殺の問題

    IEでは、フロート要素と隣接した要素のマージンが、親要素のマージンと相殺されないという問題が発生する(参考リンク: 05-03)。IE7でもこの問題は修正されていない。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-11 sample03-05-11.html

    h1         {background-color:yellow;
                margin:0}

    #container {background-color:cyan;
                margin:0}

    #image     {float:left;
                margin:0}

    #text      {margin:20px 0}
    <div id="container">

    <p id="image">
    <img src="image.png" width="85" height="85" />
    </p>

    <p id="text">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>

    </div>

    この問題を回避するには、親要素と相殺されるべきマージンを0に指定するという方法がある。これにより、ブラウザごとの表示を揃えることが可能だ。なお、marginプロパティの指定を行わないと、デフォルトスタイルシートによってマージンが挿入され、余白を消すことができないので注意が必要だ。

    v

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-12 sample03-05-12.html

    h1         {background-color:yellow;
                margin:0}

    #container {background-color:cyan;
                margin:0}

    #image     {float:left;
                margin:0}

    #text      {margin:0}
    <h1>見出し</h1>

    <div id="container">

    <p id="image">
    <img src="image.png" width="85" height="85" />
    </p>

    <p id="text">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>

    </div>

    フロート要素の下マージンがなくなる問題

    IEでは、横幅や高さを指定した要素内にフロート要素がある場合、フロート要素の下マージンがなくなるという問題が発生する(参考リンク: beta2 05-03)。この問題は、IE7でも修正されていない。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-13 sample03-05-13.html

    #container {background-color:cyan;
                width:400px}

    #image     {float:left;
                margin-right: 20px;
                margin-bottom: 20px}

    #b         {clear:both;
                width:400px}
    <div id="container">

    <div id="image"><img src="image.png" width="100" height="100" /></div>

    <div id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</div>

    </div>

    <div id="b">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</div>

    この問題は、「横幅や高さを指定した要素内のフロート要素が除外されない問題(参考リンク: 正式版03-05)」が原因になっていると考えられ、横幅を指定しなければ回避することが可能だ。

    横幅を指定する必要がある場合、横幅はフロート要素の直近の親要素に指定せず、それ以外の要素に指定することで問題を回避することができる。以下のソースでは全体を<div id="all">で囲み、横幅を指定している。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-14 sample03-05-14.html

    #all       {width:400px}

    #container {background-color:cyan}

    #image     {float:left;
                margin-right: 20px;
                margin-bottom: 20px}

    #b         {clear:both;
                width:400px}
    <div id="all">

    <div id="container">

    <div id="image"><img src="image.png" width="100" height="100" /></div>

    <div id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</div>

    </div>

    <div id="b">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</div>

    </div>

    回り込みを解除した要素内の上部に余白が挿入される問題

    IEでは、回り込みを解除した要素に上パディングを指定すると、指定より大きな余白が挿入されるという問題が発生する(参考リンク: beta2 05-03)。IE7でもこの問題は修正されていない。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-15 sample03-05-15.html

    #container {background-color:cyan}

    #image     {float:left;}

    #b         {clear:both;
                background-color:yellow;
                border:solid 3px red;
                padding:1em}
    <div id="container">

    <div id="image"><img src="image.png" width="100" height="100" /></div>

    <div id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</div>

    </div>

    <div id="b">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</div>

    この問題は、clearプロパティとpaddingプロパティを1つの要素にいっしょに指定しないことで回避することができる。たとえば、以下のソースでは<div id="b">の内側を<div id="bb">でマークアップし、<div id="b">にclearプロパティ、<div id="bb">にpaddingプロパティを指定している。

    IE6での表示

    IE7での表示

    Firefoxでの表示

    サンプルソース: 3-5-16 sample03-05-16.html

    #container {background-color:cyan}

    #image     {float:left;}

    #b         {clear:both;
                background-color:yellow;
                border:solid 3px red}

    #bb        {padding:1em}
    <div id="container">

    <div id="image"><img src="image.png" width="100" height="100" /></div>

    <div id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</div>

    </div>

    <div id="b"><div id="bb">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</div></div>

    【コラム】クリエイターのためのライフハック 第26回 プラグインでカスタマイズ、自分だけのQuickSilverを作ろう - QuickSilver

    マイクロソフト、「Expression」シリーズのWeb構築ツールを2月に先行発売

    新着記事

    Behringer、「XENYX iX」シリーズにiPad用Dock搭載の3モデルを追加 [16:51 2/10]
    Behringer、iPadの入出力を拡張できるドッキングステーション発表 [16:05 2/10]
    iPadでワイヤレス操作可能な16chデジタルミキサー「MACKIE DL1608」 [15:43 2/10]
    Avid、本格的なムービー制作を実現するiPadアプリ「Avid Studio」発売 [15:17 2/10]
    優れた住宅設計を選ぶ「第32回 INAXデザインコンテスト」の審査結果発表 [17:33 2/9]

    特設サイトの情報

      人気記事

      一覧

        もっと見る

        イチオシ記事

        もっと見る

        新着記事

        特別企画

        マイナビニュースマガジン

          ページトップ