无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

推薦新聞
IE8瀏覽器外層div高度不隨內(nèi)層div高度改變
發(fā)布者:深藍互聯(lián)
發(fā)布時間:2014-07-10
點擊:次

內(nèi)層div在顯示新聞內(nèi)容或者產(chǎn)品的時候,文章的長短不一,因此我們常常對內(nèi)層div做成高度自適應。

min-height:500px

;height:500px;

height:auto!important;

當然對外層div也做成高度自適應。

但是顯示效果的時候,內(nèi)層div高度被擠高時,外層div沒有跟隨被拉高,導致外層div 之外的div進入了內(nèi)部div,導致內(nèi)部div溢出外層div之外,。

想到是外層div沒有跟隨內(nèi)部div高度變化所致。

搜索有以下結(jié)果

一、IE8下div嵌套時,外層div高度不隨內(nèi)層div高度改變的問題解決
<div id=”a1″>

       <div id=”b1″></div>

        <div id=”b2″></div>

</div>

當b1和b2都是float=left時候,a1層的高度不會被b1和b2的高度撐開。(這個現(xiàn)象只有IE8發(fā)生,其他版本IE以及IE8選擇兼容模式后就沒有問題。)

解決方法:a1的display=table

二. 高度不適應

高度不適應是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié),特別是當內(nèi)層對象使用

margin 或paddign 時。例:

<div id=”box”>

<p>p對象中的內(nèi)容</p>

</div>

CSS:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法:在P對象上下各加2個空的div對象CSS代碼:.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

三. 額外標簽法

這種方法就是向父容器的末尾再插入一個額外的標簽,并令其清除浮動(clear)以撐大父容器。這種方法瀏覽器兼容性好,沒有什么問題,缺點就是需要額外的(而且通常是無語義的)標簽。我個人不喜歡這種方法,但是它確實是W3C推薦的方法:

<div style="clear:both;"></div>

或者使用

<br style="clear:both;" />

使用after偽類

這種方法就是對父容器使用after偽類和內(nèi)容聲明在指定的現(xiàn)在內(nèi)容末尾添加新的內(nèi)容。經(jīng)常的做法就是添加一個“點”,因為它比較小不太引人注意。然后我們再利用它來清除浮動(閉合浮動元素),并隱藏這個內(nèi)容。

這種方法兼容性一般,但經(jīng)過各種 hack 也可以應付不同瀏覽器了,同時又可以保證html 比較干凈,所以用得還是比較多的。

復制代碼代碼如下:

#outer:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

 
設置overflow為hidden或者auto {IE8常見內(nèi)部浮動外部高度不適應解決方法}

這種做法就是將父容器的overflow設為hidden或auot就可以在標準兼容瀏覽器中閉合浮動元素.

不過使用overflow的時候,可能會對頁面表現(xiàn)帶來影響,而且這種影響是不確定的,你最好是能在多個瀏覽器上測試你的頁面

 
.box:after {
     content: ".";
     display: block;
     height: 0px;
     clear: both;
     visibility: hidden;
}
然后將父層DIV代碼中的<div id="main">改為<div id="main" class="box">。

 

關注深藍互聯(lián)公眾號
Copyright ? 2013-2025 深藍互聯(lián) 版權(quán)所有
友情鏈接: