兼容FIREFOX下背景层的自适应高度

在FF下DIV层里包含的是DIV层,而不是内容文字的话,背景图是不会自动适应高度的,无忧布局的时候用到了背景自适应高度,就顺手发来,与大家一起分享.

收集整理了三种解决方法.

首先我们定义三个层.

<div id="container">
<div id="main" /></div>
<div id="sidebar" /></div>
</div>

第一种:

设定CSS

#container { display:table}

container作为最外层，在IE下背景图可以自适应，但在FF下只有main层与sidebar层可以.
只需定义#container { display:table}就可以了，原理是和以前的表格布局是一样的．
只是这样的话会出现float层出错,不推荐使用.

 

第二种:

设定CSS

#container{height:100% }
#main{height:100% }
#sidebar{height:100% }

这样就兼容了IE ,FF，比起display:table;的方法好些。display:table;会导致一些布局出错。

第三种:

设定CSS

#container:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏