爲什麼table裏用了display:block;就和第一列寬度一樣呢?

在前端頁面展示需要通過判斷來顯示 table標籤內的東西,按照常理,對於某一單元行需要顯示時,使用: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了。具體原因有待牛人分析。

別答案: 
1、每個html標籤都有自己的默認display屬性的,你把display設置成空的時候,瀏覽器應該是把元素給成默認的屬性了,所以就兼容了所有的瀏覽器,可謂是無招勝有招啊! 
2、不過,如果tr的display:none是在外部引入的css文件中設置的話,在ie7腳本中用display:”方法是沒有用的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章