兼容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浏覽器。