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> 。