淺談CSS的visibility: hidden | collapse 與display: none

對於CSS裡的visibility屬性，通常其值被設定成visible或hidden。

visibility: hidden相當於display:none，能把元素隱藏起來，但兩者的區別在於：

①　display:none 元素不再佔用空間。

②　visibility: hidden使元素在網頁上不可見，但仍佔用空間。

然而，visibility 還可能取值為collapse 。當設定元素 visibility: collapse後，一般的元素的表現與visibility: hidden一樣，也即其會佔用空間。但如果該元素是與table相關的元素，例如table row、table column、table column group、table column group等，其表現卻跟display: none一樣，也即其佔用的空間會釋放。

在不同瀏覽器下，對 visibility: collapse的處理方式不同：

①　visibility: collapse的上述特性僅在Firefox下起作用。

②　在IE即使設定了visibility: collapse，還是會顯示元素。

③　在Chrome下，即使會將元素隱藏，但無論是否是與table相關的元素，visibility: collapse都與visibility: hidden沒有什麼區別，即仍會佔用空間。