CSS display:block在Firefox下顯示布局錯(cuò)亂問(wèn)題

2024-07-11 08:49:18

字體：大中小

供稿：網(wǎng)友

對(duì)于某一單元行需要顯示時(shí)，使用CSS display:block屬性，不需要顯示時(shí)使用display:none屬性，在IE瀏覽器中顯示正常，沒(méi)有任何問(wèn)題，但是當(dāng)用Firefox瀏覽時(shí)卻出現(xiàn)了布局錯(cuò)亂的問(wèn)題，這是為什么呢？

本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯(cuò)亂問(wèn)題，按照常理，對(duì)于某一單元行需要顯示時(shí)，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但是當(dāng)用Firefox瀏覽時(shí)卻出現(xiàn)了布局錯(cuò)亂的問(wèn)題，這里和大家分享一下解決方法。

CSS display:block在Firefox下顯示布局錯(cuò)亂問(wèn)題
按照常理，對(duì)于某一單元行需要顯示時(shí)，使用CSS display:block屬性，不需要顯示時(shí)使用display:none屬性，而且這樣做在IE瀏覽器中顯示正常，沒(méi)有任何問(wèn)題。
但是當(dāng)用Firefox瀏覽時(shí)卻出現(xiàn)了布局錯(cuò)亂的問(wèn)題，然后通FireBug去看了下源碼，調(diào)試下了，發(fā)現(xiàn)是CSS display:block屬性搞的鬼。
1、當(dāng)表格為多列的情況下，屬性為"CSS display:block"行的內(nèi)容寬度僅與第一列寬度相同，也就是說(shuō)無(wú)論你使colspan的屬性值為多少，剩余列的空間都不進(jìn)行解析。
2、同一行反復(fù)的在"CSS display:none;"與"CSS display:block;"兩個(gè)狀態(tài)間切換時(shí)，表格的底部會(huì)持續(xù)的產(chǎn)生多余的空白空間以至于造成頁(yè)面布局的扭曲。

解決方法：
1、用CSS display:table-row屬性來(lái)調(diào)試，發(fā)現(xiàn)者FireFox下正常了，但I(xiàn)E是不支持改屬性的，怎么辦呢？用JS來(lái)做判斷，然后做兼容吧。
2、另外一個(gè)很簡(jiǎn)單也很可行的方法，就是用display:''這個(gè)屬性dispaly后面不加任何的東西，很奇怪，這樣就兼容了Firefox和IE了。

上一篇：30個(gè)開(kāi)發(fā)人員有用的CSS代碼片段整理值得借鑒

下一篇：CSS屬性display:inline-block用法深入理解