css中visibility與display屬性區別比較

瀏覽器支援

所有主流瀏覽器都支援 visibility 屬性。

注釋：任何的版本的 internet explorer （包括 ie8）都不支援 "inherit" 和 "collaps教程e" 屬性值。

所有主流瀏覽器都支援 display 屬性。

注釋：任何版本的 internet explorer （包括 ie8）都不支援 "inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、以及 "table-row-group" 屬性值。

說明
display

這個屬性用於定義建立布局時元素產生的顯示框類型。對於 html 等文件類型，如果使用 display 不謹慎會很危險，因為可能違反 html 中已經定義的顯示階層。對於 xml，由於 xml 沒有內建的這種階層，所有 display 是絕對必要的。

visibility

這個屬性指定是否顯示一個元素產生的元素框。這意味著元素仍佔據其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表布局中刪除列或行。

總結，

display可以隱藏元素並且不佔用頁面上的空間，而visibility中是讓元素看不到它會佔據頁面上的空間。