DIV+CSS布局浏览器兼容问题解决笔记

1.设置页面绝对居中：    

 

body

{

    text-align:center;

    margin-top:0px;        /*margin细谈：http://www.planabc.net/2007/03/18/css_attribute_margin/*/

    margin-right:auto;

    margin-bottom:0px;

    margin-left:auto;

   

}

 

2.解决Firefox 下 DIV高度不能自动适应问题：

#divId

{

    overflow:auto;            /*溢出设置为auto*/

    height:auto;                /*设置div的高度为auto，此处可不写，禁止给height赋具体的像素值*/

    margin-top:0px;          /*设置margin值，解决Firefox margin有时候加倍的隐患，我也不知道什么情况下才会发生，所以避免一下*/

    margin-right:0px;

    margin-bottom:0px;

    margin-left:0px;

}

当应用使用模板创建网页的时候，不设置高度的具体值会使页面达不到想要的效果，那么我们可以加一个<p>或者<span>标签来撑开div,具体设置如下：

*.HTML文件：

<div id="divId">

    自适应高度div    

</div>

 

<p style="padding-bottom:(int)px;"> </p>                /*int为可调的整数*/

   同样我们也可以使用<span>标签来实现我们的效果：

<span style="dispaly:block;padding-bottom:(int)px;">

当布局使用非常紧密，比较精确的时候这也是一个hacking的好方法。如果还需要添加其他内容，把上面的<span>标签定义修改为：

<span style="display:block;height:(int)px">呈现的内容</span> 。