【特集】

CSS実装徹底検証! そこが知りたいInternet Explorer 7

18 05-04 回り込みの問題[未修正]

    エ・ビスコム・テック・ラボ　 [2006/07/13]
    印刷

    親要素の横幅に納まらない要素の回り込みが解除される問題[未修正]

    親要素に横幅が指定されているとき、IEでは親要素の横幅に納まらない要素の回り込みが解除されるという問題が発生する。サンプルソース5-4-1では、親要素となる<div id="container">の横幅を300ピクセルに指定し、水色の背景色と青い罫線を指定している。この中には、floatプロパティを指定した文章Ａと、文章Ｂを記述している。文章Ａの横幅は100ピクセル、文章Ｂの横幅は300ピクセルに指定しているため、横幅の合計は400ピクセルとなり、親要素の横幅よりも大きくなる。

    このソースをブラウザで表示すると、IE6では<div id="container">の横幅が中身に合わせて大きくなり、文章Ｂの回り込みは解除されていることがわかる。一方、IE7 beta2では、<div id="container">の横幅は指定したサイズで表示されているものの、文章Ｂの回り込みは解除されている。なお、Firefoxで表示した場合、<div id="container">の横幅は指定したサイズで表示され、文章Ｂも文章Ａに回り込んだ形で表示される。

    図5-4-1a:IE6での表示

    図5-4-1b:IE7 beta2での表示

    図5-4-1c:Firefoxでの表示

    サンプルソース5-4-1

    #container    {width:300px;
                  background-color:cyan;
                  border:solid 2px blue}

    #a    {float:left;
          width:100px;
          background-color:pink}

    #b    {width:300px;
          margin-left:110px;
          background-color:yellow}

    <div id="container">
    <div id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</div>
    <div id="b">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</div>
    </div>

    複数の要素にfloatを指定したときの表示位置に関する問題[未修正]

    フロート要素の前に他のフロート要素が記述されている場合、現在のフロート要素は先に記述されたフロート要素の右側か下に表示しなければならないとされている。しかし、複数の要素にfloatとclearを指定した場合、IEではフロート要素の表示位置がおかしくなってしまう。この問題は、IE7 beta2でも修正されていない。

    サンプルソース5-4-2では、文章Ａ～文章Ｅの5つの要素にfloat:leftを指定している。このうち、文章Ｂと文章Ｄにはclear:leftを指定し、回り込みを解除している。floatの表示ルールに従うと、Firefoxのように文章ＢとＣ、文章ＤとＥが並んで表示されなければならない。しかし、IE6やIE7 beta2では、文章ＣとＥが文章Ａの横に表示されてしまい、floatの表示ルールに反していることになる。

    図5-4-2a:IE6での表示

    図5-4-2b:IE7 beta2での表示

    図5-4-2c:Firefoxでの表示

    サンプルソース5-4-2

    #a    {float:left;
          width:100px;
          background-color:pink}

    #b    {float:left;
          width:100px;
          background-color:yellow;
          clear:left}

    #c    {float:left;
          width:100px;
          background-color:orange}

    #d    {float:left;
          width:100px;
          background-color:cyan;
          clear:left}

    #e    {float:left;
          width:100px;
          background-color:red}

    <div id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</div>
    <div id="b">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</div>
    <div id="c">文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ文章Ｃ</div>
    <div id="d">文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ文章Ｄ</div>
    <div id="e">文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ文章Ｅ</div>

    ドスパラから初のクリエイター専用PCモデル「Prime Create」発売開始

    【レポート】「第1回プロダクトデザインフォーラム2006」開催 - やばいよ、日本……!?

    新着記事

    インターネット、V2版を再現した「VOCALOID3 Megpoid Native」発表 [18:43 2/10]
    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]

    特設サイトの情報

      人気記事

      一覧

        もっと見る

        イチオシ記事

        もっと見る

        新着記事

        特別企画

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

          ページトップ