IE6下css設(shè)置容器高度的BUG不能小于某個值
發(fā)布時間：2013-03-06 10:31:45 作者：佚名 
我要評論
我要評論在IE6中設(shè)置display:block的空容器為一個較小高度時不知道大家有沒有注意到其高度不能小于某個值，接下來為您詳細(xì)介紹下IE6中容器高度的BUG，感興趣的你可以參考下本文
在IE6中設(shè)置display:block的空容器一個較小高度時，如<p style="height:1px;"></p>，會發(fā)現(xiàn)其高度不能小于某個值
<p style="background: #f00; height: 1px; font-size:0"></p><!-- demo1 -->
demo1:設(shè)置font-size:0,但是這個容器的高度最小為2px,所以沒有辦法實(shí)現(xiàn)高度為1px的效果
<p style="background: #f00; height: 1px; line-height:0;"> </p> <!-- demo2 -->
<p style="background: #f00; height: 1px; line-height:0;"><br/></p> <!-- demo3 -->
demo2 & demo3:在容器中增加內(nèi)容或其他空標(biāo)簽，如 、<br />，并設(shè)置line-height:0，雖然可實(shí)現(xiàn)效果，
但該容器會存在一個和其父容器字體大小有關(guān)的外邊距
<p style="background: #f00; height: 1px; font-size:0;line-height:0"> </p><!-- demo4 -->
<p style="background: #f00; height: 1px; font-size:0;line-height:0"><br/></p><!-- demo5 -->
demo4 & demo5:雖然可以解決外邊距的問題，但是在font-family：fixedsys（window的古老字體）等字體下還是會產(chǎn)生問題。
<p style="background: #f00; height: 1px; overflow:hidden;"></p><!-- demo6 -->
demo6:目前看到的最好的解決方案
復(fù)制代碼
代碼如下:<p style="background: #f00; height: 1px; font-size:0"></p><!-- demo1 -->
demo1:設(shè)置font-size:0,但是這個容器的高度最小為2px,所以沒有辦法實(shí)現(xiàn)高度為1px的效果
復(fù)制代碼
代碼如下:<p style="background: #f00; height: 1px; line-height:0;"> </p> <!-- demo2 -->
<p style="background: #f00; height: 1px; line-height:0;"><br/></p> <!-- demo3 -->
demo2 & demo3:在容器中增加內(nèi)容或其他空標(biāo)簽，如 、<br />，并設(shè)置line-height:0，雖然可實(shí)現(xiàn)效果，
但該容器會存在一個和其父容器字體大小有關(guān)的外邊距
復(fù)制代碼
代碼如下:<p style="background: #f00; height: 1px; font-size:0;line-height:0"> </p><!-- demo4 -->
<p style="background: #f00; height: 1px; font-size:0;line-height:0"><br/></p><!-- demo5 -->
demo4 & demo5:雖然可以解決外邊距的問題，但是在font-family：fixedsys（window的古老字體）等字體下還是會產(chǎn)生問題。
復(fù)制代碼
代碼如下:<p style="background: #f00; height: 1px; overflow:hidden;"></p><!-- demo6 -->
demo6:目前看到的最好的解決方案
相關(guān)文章
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時產(chǎn)生的空隙問題的解決作了重點(diǎn)講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時候，我們常常會用到display對應(yīng)值有block、none、inline這三個值。下面我們來分別來認(rèn)識和學(xué)習(xí)什么時候用什么值。這里通過CSS display知識加實(shí)例講解2014-09-02
- visiblity 是設(shè)置元素的可見性，即可見 / 隱藏；display 是設(shè)置元素按什么樣的方式來顯示，是按塊顯示，不了解的朋友可以參考下2014-02-24
css中display和visibility的用法和區(qū)別介紹
css中display和visibility想必前臺美工對它并不陌生吧，如果你感覺自己對它還不是很熟悉的話，不妨了解本文對display和visibility的使用介紹2013-11-17- 到現(xiàn)在可能有人不知道display:block的作用，問了一句在div的元素里面寫display：block有用嗎？至于這個問題可以詳細(xì)參考喜下本文，希望對大家有所幫助2013-09-24
談?wù)凜SS隱藏元素(display,visibility)的區(qū)別
在CSS中，讓元素隱藏（指屏幕范圍內(nèi)肉眼不可見）的方法很多，有的占據(jù)空間，有的不占據(jù)空間；有的可以響應(yīng)點(diǎn)擊，有的不能響應(yīng)點(diǎn)擊2013-04-09CSS display:block在Firefox下顯示布局錯亂問題
本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯亂問題，按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但2012-12-30基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點(diǎn)像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因為使用了2012-12-07- 網(wǎng)頁制作Webjx文章簡介：網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。2009-04-02
- 網(wǎng)頁制作Webjx文章簡介：這篇文章所講的也是非常使用的技術(shù)，其中牽涉到其他的技術(shù)，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。2009-04-02