[Safari]Clearfixで下スペースが出てしまう問題 [css,hack,safari,tips] - BlurBlue-Note
[Safari]Clearfixで下スペースが出てしまう問題
以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。
CSSPlain Text
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にすることで解決できました。
多分これでしばらくは問題出ないはず…です。
