兼容FIREFOX下背景层的自适应高度
摘要：在FF下DIV层里包含的是DIV层,而不是内容文字的话,背景图是不会自动适应高度的,无忧布局的时候用到了背景自适应高度,就顺手发来,与大家一...
在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浏览器。
【兼容FIREFOX下背景层的自适应高度】相关文章：
★ CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
上一篇：
关于DIVCSS浮动float的兼容
下一篇：
img标签下多余空白BUG解决方法