2009年09月18日

IE6でfloadをかけたblock要素の親要素のwidthが伸びる

こんにちは。溝上です。

最近こんな運動もありますが、まだまだIE6対応はしなければいけないことって多いですよね・・・

そんなわけで今回はInternet Explorer6の

floatをかけたblock要素の親要素のwidthが伸びる

というバグを紹介したいと思います。

それでは早速サンプルを見ていただきたいと思います。


(htmlコーディング)
<div class="section">
<div class="block">
<div class="entry" id="entry01">
<h2 class="title">1111</h2>
</div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2>
</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
text-indent:-9999px;
}
.section {
width:650px;
background-color:#9FF;
}
.section .block {
width:630px;
margin:0 auto;
background-color:#F00;
}
.section .entry {
float:left;
width:300px;
margin-right:15px;
background-color:#9F9;
}
.section .entry h2.title {
width:300px;
padding:10px 0;
}

ではまずはFirefoxから。
▼スクリーンショット(Firefox3.0)
さすがFirefox。意図通りですね。

では次に問題児のIE6をご覧ください。
▼スクリーンショット(Internet Explorer6)
floatをかけているentryの親であるblockの幅が伸びているのが
お分かりいただけたかと思います。
どうにもIE6では

floatさせた最後の要素(clearする前)のfloatと反対側のmarginが伸びる
ことがあるようです。(←重要です)

その後、親要素を伸びた値にあわせて広げたりすることがあるようです。(←重要)

これはひどい。
いままでたまに計算はあってるはずなのになぜかIE6でfloatが崩れたり、
なぜかセンタリングした要素がやたら左によってたりしたのは
恐らくこのバグのせいでしょう。

解決策としては最後の要素のmarginをとるのが一番手っ取り早いと思います。

(cssサンプル)
.section .entry#entry02 {
margin-right:0;
}
▼スクリーンショット(Internet Explorer6)

なんとか見た目は整いました。
なぜ最後だけmarginが伸びるのだろうとか、なんで親要素の幅まで伸ばすんだとか、
いろいろとIE6に突っ込みを入れたいですね。


そんなわけで今回はInternet Explorer6の

floatをかけたblock要素の親要素のwidthが伸びる

というバグを紹介したいと思います。

それでは早速サンプルを見ていただきたいと思います。


(htmlコーディング)
<div class="section">
<div class="block">
<div class="entry" id="entry01">
<h2 class="title">1111</h2>
</div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2>
</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
text-indent:-9999px;
}
.section {
width:650px;
background-color:#9FF;
}
.section .block {
width:630px;
margin:0 auto;
background-color:#F00;
}
.section .entry {
float:left;
width:300px;
margin-right:15px;
background-color:#9F9;
}
.section .entry h2.title {
width:300px;
padding:10px 0;
}

ではまずはFirefoxから。
▼スクリーンショット(Firefox3.0)
さすがFirefox。意図通りですね。

では次に問題児のIE6をご覧ください。
▼スクリーンショット(Internet Explorer6)
floatをかけているentryの親であるblockの幅が伸びているのが
お分かりいただけたかと思います。
どうにもIE6では

floatさせた最後の要素(clearする前)のfloatと反対側のmarginが伸びる
ことがあるようです。(←重要です)

その後、親要素を伸びた値にあわせて広げたりすることがあるようです。(←重要)

これはひどい。
いままでたまに計算はあってるはずなのになぜかIE6でfloatが崩れたり、
なぜかセンタリングした要素がやたら左によってたりしたのは
恐らくこのバグのせいでしょう。

解決策としては最後の要素のmarginをとるのが一番手っ取り早いと思います。

(cssサンプル)
.section .entry#entry02 {
margin-right:0;
}
▼スクリーンショット(Internet Explorer6)

なんとか見た目は整いました。
なぜ最後だけmarginが伸びるのだろうとか、なんで親要素の幅まで伸ばすんだとか、
いろいろとIE6に突っ込みを入れたいですね。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

タグ:IE6 CSS 崩れ float
posted by baba at 17:37 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。