div+css布局浏览器兼容问题解决笔记...
时间:2010-08-06 来源:ofdata
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*/
/*设置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;呈现的内容</span> 。