解决火狐浏览器中DIV的高度不随里面的内容增高而增高的问题

在IE浏览器中#main这个DIV可以正常显示,但在火狐浏览器中不能正常显示#main这个DIV,即#main这个DIV的高度不会随里面的内容的高度增加而增加。可用如下的办法解决:
        在样式表中#main这个样式规则的下面建立如下样式规则即可:

#main {
    padding: 10px;
    width: 800px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    background-color: #CCCCCC;
}

#main:after{
    content:".";
    visibility:hidden;
    display:block;
    clear:both;
    height:0px;
    font-size:0px;
}

        注意:在#main这个样式规则中不要设置height属性值。
        说明:content:"."中引号里的内容可以是“.”,也可以是其他任务字符或字符串。
        如下样式规则在IE6中测试无效,需更高的IE版本。

posted @ 2013-05-15 23:07  思想在走路  阅读(1154)  评论(0)    收藏  举报