• HOME
  • p.c.c. blog
  • IE6、IE7でfloatを内包した要素のmargin-bottomが消える際の対処法
p.c.c. blog

メディア運営や請負ウェブ制作などを通して得た
経験や情報を
その場で消費せずアウトプットする
ための場としてのブログ。

現在レガシー対応ガチガチな案件を進行中です。

タイトルの通り、IE6とIE7にてmargin-bottomが消滅するということが起こりました。

CSS


.services { margin-bottom:10px;}
.services:after { content:'.'; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;} //clearfix
.services li { display:inline; float:left; margin-bottom:20px}

上記コードだと、.servisesの下の余白が、
IE6 → ネガティブマージンを指定したかのように下の要素に食い込む
IE7 → マージンが効かない
という現象が起こりました。

解決方法

IE6,IE7にpaddingを指定したらマージンが効くようになります。

CSS


.ie6 .services { padding-bottom:1px; margin-bottom:25px;}
.ie7 .services { padding-bottom:1px; margin-bottom:30px;}

ただし、5pxほどIE6は余分に隙間ができるので、5px減らして指定しました。
これでなんとなく解決。
しかし、なぜpaddingで??

hasLayoutの問題かもしれない

と思い、paddingではなくzoom:1;を指定したところ、同じく改善しました。
しかし、コリスさんの「IEでのCSSのバグを回避するhasLayout」の記事によるとpaddingはhaslayoutをtrueにするリストには入っていないようです。

そしてpadding-leftやpadding-rightでは改善されないので、結局のところ何が原因なのかは釈然としませんでした。

レガシーブラウザ時代のHTMLコーディングは今よりもかなり試行錯誤とひらめきが必要だったことを考えると、autoPlefixerだとかSASSなどが出てきた現在、本当に便利になったということを実感します。

当社はレガシー対応も柔軟に行っていますので、要件のキツい案件でも何でもご相談ください。

株式会社p.c.c.

フロントエンドの下請け・請負制作をはじめ、多数のウェブコンテンツを自社で企画・制作・運営している会社です。企業の外部ウェブ担当として顧問契約も行っています。