最近こんな運動もありますが、まだまだIE6対応はしなければいけないことって多いですよね・・・
そんなわけで今回はInternet Explorer6の
floatをかけたblock要素の親要素のwidthが伸びる
というバグを紹介したいと思います。
それでは早速サンプルを見ていただきたいと思います。
- （htmlコーディング）
-
<div class="section">
<div class="block"></div>
<div class="entry" id="entry01"></div>
<h2 class="title">1111</h2></div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2></div>
<div class="clear"> </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>
<div class="entry" id="entry01"></div>
<h2 class="title">1111</h2></div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2></div>
<div class="clear"> </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に突っ込みを入れたいですね。
