在table中tr的display:block在firefox下顯示布局錯亂問題
按照常理，對于某一單元行需要顯示時，使用：display:block屬性，不需要顯示時使用display:none屬性，而且這樣做在IE瀏 覽器中顯示正常，沒有任何問題。
但是當用Firefox瀏覽時卻出現了布局錯亂的問題，然后通FireBug去看了下源碼，調試下了，發現是display:block屬性搞的 鬼。
1、當表格為多列的情況下，屬性為"display:block"行的內容寬度僅與第一列寬度相同，也就是說無論你使colspan的屬性值為多 少，剩余列的空間都不進行解析。
2、同一行反復的在"display:none;"與"display:block;"兩個狀態間切換時，表格的 底部會持續的產生多余的空白空間以至于造成頁面布局的扭曲。
解決方法：
1、用display:table-row屬性來調試，發現者FireFox下正常了，但IE是不支持改屬性的，怎么辦呢？用 JS來做判斷，然后做兼容吧。
2、另外一個很簡單也很可行的方法，就是用 display:' ' 這個屬性dispaly后面不加任何的東西，很奇怪，這樣就兼容了Firefox和IE了。
在table中tr的display:block在firefox下顯示布局錯亂問題
按照常理，對于某一單元行需要顯示時，使用：display:block屬性，不需要顯示時使用display:none屬性，而且這樣做在IE瀏 覽器中顯示正常，沒有任何問題。
但是當用Firefox瀏覽時卻出現了布局錯亂的問題，然后通FireBug去看了下源碼，調試下了，發現是display:block屬性搞的 鬼。
1、當表格為多列的情況下，屬性為"display:block"行的內容寬度僅與第一列寬度相同，也就是說無論你使colspan的屬性值為多 少，剩余列的空間都不進行解析。
2、同一行反復的在"display:none;"與"display:block;"兩個狀態間切換時，表格的 底部會持續的產生多余的空白空間以至于造成頁面布局的扭曲。
解決方法：
1、用display:table-row屬性來調試，發現者FireFox下正常了，但IE是不支持改屬性的，怎么辦呢？用 JS來做判斷，然后做兼容吧。
2、另外一個很簡單也很可行的方法，就是用 display:' ' 這個屬性dispaly后面不加任何的東西，很奇怪，這樣就兼容了Firefox和IE了。
蘇公網安備 32070502010230號