[Safari]Clearfixで下スペースが出てしまう問題

以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。

CSS
  1. .hoge:after {
  2. display: block;
  3. clear: both;
  4. height: 0;
  5. visibility: hidden;
  6. content: ".";
  7. line-height: 0;
  8. }
  9. .hoge {
  10. display: inline-table;
  11. min-height: 1%;
  12. }
  13. /* for macIE \*/
  14. * html .hoge {
  15. height: 1%;
  16. }
  17. .hoge {
  18. display: block;
  19. }
  20. /* end of for macIE */

どこが変わったかというと、モダンブラウザ用に書かれている、.hoge:afterの部分に
line-height: 0;
が入りました。
今までのものだとclearfixをかけたblock要素の下にマージンが出てしまう問題があったのですが、line-heightを0にすることで解決できました。

多分これでしばらくは問題出ないはず…です。

  • コメント(0)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読