在table中的display:block顯示佈局錯亂

當用谷歌瀏覽器時,在將表格table中的<tr>的display屬性從none改成block時,或出現全部的td都不起做用,內容都集中在第一列裏,而後在網上百度了一下,一下事緣由分析和解決方法瀏覽器

一、當表格爲多列的狀況下,屬性爲"display:block"行的內容寬度僅與第一列寬度相同,也就是說不管你使colspan的屬性值爲多少,剩餘列的空間都不進行解析。
二、同一行反覆的在"display:none;"與"display:block;"兩個狀態間切換時,表格的底部會持續的產生多餘的空白空間以致於形成頁面佈局的扭曲。

解決方法:
一、用display:table-row屬性來調試,發現者FireFox下正常了,但IE是不支持改屬性的,怎麼辦呢?用JS來作判斷,而後作兼容吧。
二、另一個很簡單也很可行的方法,就是用 display:' ' 這個屬性dispaly後面不加任何的東西,很奇怪,這樣就兼容了Firefox和IE了。具體緣由有待牛人分析。佈局

相關文章
相關標籤/搜索