CSS display:block在Firefox下顯示布局錯亂問題
發(fā)布時間：2012-12-30 16:33:21 作者：佚名 
我要評論
我要評論本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯亂問題，按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但是當用Firefox瀏覽時卻出現(xiàn)了布局錯亂的問題，這里和大家分享一下解決方法
對于某一單元行需要顯示時，使用CSS display:block屬性，不需要顯示時使用display:none屬性，在IE瀏覽器中顯示正常，沒有任何問題，但是當用Firefox瀏覽時卻出現(xiàn)了布局錯亂的問題，這是為什么呢？
本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯亂問題，按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但是當用Firefox瀏覽時卻出現(xiàn)了布局錯亂的問題，這里和大家分享一下解決方法。
CSS display:block在Firefox下顯示布局錯亂問題
按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，不需要顯示時使用display:none屬性，而且這樣做在IE瀏覽器中顯示正常，沒有任何問題。
但是當用Firefox瀏覽時卻出現(xiàn)了布局錯亂的問題，然后通FireBug去看了下源碼，調試下了，發(fā)現(xiàn)是CSS display:block屬性搞的鬼。
1、當表格為多列的情況下，屬性為"CSS display:block"行的內容寬度僅與第一列寬度相同，也就是說無論你使colspan的屬性值為多少，剩余列的空間都不進行解析。
2、同一行反復的在"CSS display:none;"與"CSS display:block;"兩個狀態(tài)間切換時，表格的底部會持續(xù)的產生多余的空白空間以至于造成頁面布局的扭曲。
解決方法：
1、用CSS display:table-row屬性來調試，發(fā)現(xiàn)者FireFox下正常了，但IE是不支持改屬性的，怎么辦呢？用JS來做判斷，然后做兼容吧。
2、另外一個很簡單也很可行的方法，就是用display:''這個屬性dispaly后面不加任何的東西，很奇怪，這樣就兼容了Firefox和IE了。
本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯亂問題，按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但是當用Firefox瀏覽時卻出現(xiàn)了布局錯亂的問題，這里和大家分享一下解決方法。
CSS display:block在Firefox下顯示布局錯亂問題
按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，不需要顯示時使用display:none屬性，而且這樣做在IE瀏覽器中顯示正常，沒有任何問題。
但是當用Firefox瀏覽時卻出現(xiàn)了布局錯亂的問題，然后通FireBug去看了下源碼，調試下了，發(fā)現(xiàn)是CSS display:block屬性搞的鬼。
1、當表格為多列的情況下，屬性為"CSS display:block"行的內容寬度僅與第一列寬度相同，也就是說無論你使colspan的屬性值為多少，剩余列的空間都不進行解析。
2、同一行反復的在"CSS display:none;"與"CSS display:block;"兩個狀態(tài)間切換時，表格的底部會持續(xù)的產生多余的空白空間以至于造成頁面布局的扭曲。
解決方法：
1、用CSS display:table-row屬性來調試，發(fā)現(xiàn)者FireFox下正常了，但IE是不支持改屬性的，怎么辦呢？用JS來做判斷，然后做兼容吧。
2、另外一個很簡單也很可行的方法，就是用display:''這個屬性dispaly后面不加任何的東西，很奇怪，這樣就兼容了Firefox和IE了。
相關文章
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時產生的空隙問題的解決作了重點講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時候，我們常常會用到display對應值有block、none、inline這三個值。下面我們來分別來認識和學習什么時候用什么值。這里通過CSS display知識加實例講解2014-09-02
- visiblity 是設置元素的可見性，即可見 / 隱藏；display 是設置元素按什么樣的方式來顯示，是按塊顯示，不了解的朋友可以參考下2014-02-24
css中display和visibility的用法和區(qū)別介紹
css中display和visibility想必前臺美工對它并不陌生吧，如果你感覺自己對它還不是很熟悉的話，不妨了解本文對display和visibility的使用介紹2013-11-17- 到現(xiàn)在可能有人不知道display:block的作用，問了一句在div的元素里面寫display：block有用嗎？至于這個問題可以詳細參考喜下本文，希望對大家有所幫助2013-09-24
談談CSS隱藏元素(display,visibility)的區(qū)別
在CSS中，讓元素隱藏（指屏幕范圍內肉眼不可見）的方法很多，有的占據(jù)空間，有的不占據(jù)空間；有的可以響應點擊，有的不能響應點擊2013-04-09- 在IE6中設置display:block的空容器為一個較小高度時不知道大家有沒有注意到其高度不能小于某個值，接下來為您詳細介紹下IE6中容器高度的BUG，感興趣的你可以參考下本文2013-03-06
基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了2012-12-07- 網頁制作Webjx文章簡介：網頁元素應用上那些與表格相關的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。2009-04-02
- 網頁制作Webjx文章簡介：這篇文章所講的也是非常使用的技術，其中牽涉到其他的技術，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。2009-04-02