floatした際に背景が消える件(IE編)

floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。
逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。

サンプルとなるhtmlは

<div class="parent">
　親ボックス
　<div class="child">
　　子ボックス
　</div>
　<div class="child">
　　子ボックス
　</div>
</div>

とします。

これに対して

div.parent{
　background:#39FF6B;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

このようなCSSを適用した場合、FirefoxとIEはともに同じ表示になります。
サンプル

floatした際に背景が消える件で説明したとおり、Firefoxに関しては『after擬似クラス+contentプロパティ』もしくは『overflow:auto』を使うことにより背景を表示することができますがIEの場合少し問題があります。

『after擬似クラス+contentプロパティ』に関しては、IEがこのプロパティに対応していない為、対応できません。

『overflow:auto』に関してはMacIE 5.xでoverflowにvisible以外を指定するとスクロールバーがでるというバグが存在する為、あまりお勧めできません。
また、親要素にwidthを指定しないとIE6には適用されません。

IEに対して対応するには以下のような方法があります。

width:100%を指定する

親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。

div.parent{
　background:#39FF6B;
　width:100%;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

サンプル

ただし、widthに値を指定するこの方法は後方互換モードの際にpaddingやborderが指定されている場合は、使用できません。

height:1pxを指定する

親要素に対してheight:1pxを指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。

div.parent{
　background:#39FF6B;
　height:1px;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

サンプル

ただし、IE7では内包するボックスに合わせて親ボックスの高さが拡張されない為、適用できません。

zoom:100%;を指定する

親要素に対してzoom:100%を指定することにより、背景を表示することができます。

div.parent{
　background:#39FF6B;
　zoom:100%;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

サンプル

ただし、これもまたIE7では、適用できません。

結論として

div.parent{
　background:#39FF6B;
　zoom:100%;/*IE6*/
　overflow:auto;/*IE7 and Firefox*/
}
/*\*/
* html div.parent{
　overflow: visible;
　height:1px;
}
/**/
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

サンプル

過去互換モードとかMacIEを無視できるなら

div.parent{
　background:#39FF6B;
　width:100%;
　overflow:auto;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

だけでほとんどのモダンブラウザに対応できます。

サンプル

Powered by CSS TIPS

スポンサードリンク

«floatした際に背景が消える件【css tip】 | メイン | vertical-alignの使い方【css tips】»