解决IE，Firefox双边边距问题 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>火狐浏览器的怪癖</title>
        <style>
            *{ margin:0; padding:0; }
            body{ font:12px/1.5 tahoma,arial,\5b8b\4f53; border: 1px dotted red; }
            .clearfix:after{ clear:both; content:''; display:block; height:0; }/* 如果设置overflow:auto/hidden,该现象消失 */
            .clearfix{ zoom:1; }/* 如果设置overflow:auto/hidden...(非visible),该现象消失 */
            ul li{ float:left; margin-right:30px; }
            .box{ margin:auto; width:900px; }
            .bottom{ margin-top:100px; }
        </style>
    </head>
    <body>
        <div class="box"><!-- 不要给box设置border/padding，否则这种现象就不会出现了 -->
            <ul class="clearfix"><!-- 块状元素 -->
                <li><!-- 设置浮动 -->
                    WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
                </li>
                <li><!-- 设置浮动 -->
                    QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
                </li>
            </ul>
            <div class="bottom"><!-- 调节bottom的margin-top值，你会很容易发现这种现象 -->
                PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
            </div>
        </div>
    </body>
</html>
posted @ 2012-11-19 08:33  伊晗翾  阅读(222)  评论(0)  编辑  收藏  举报