1、visibility具有繼承性，給父元素設置visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設置visibility: visible,則子元素又會顯示出來。這個和display: none有着質的區別
2、visibility: hidden不會影響計數器的計數，如圖所示，visibility: hidden雖然讓一個元素不見了，但是其計數器仍在運行。這和display: none完全不一樣
<body>
<div>
<strong>給元素設置visibility:hidden樣式</strong>
<ol>
<li>元素1</li>
<li style="visibility:hidden;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
<div>
<strong>給元素設置display:none樣式</strong>
<ol>
<li>元素1</li>
<li style="display:none;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
</body>
3、CSS3的transition支持visibility屬性，但是並不支持display，由於transition可以延遲執行，因此可以配合visibility使用純css實現hover延時顯示效果。提高用戶體驗。
擴展：
visibility: hidden 相當於 display:none，能把元素隱藏起來，但兩者的區別在於：
- 1、display:none 元素不再占用空間。
- 2、visibility: hidden 使元素在網頁上不可見，但仍占用空間。
然而，visibility 還可能取值為 collapse 。
當設置元素 visibility: collapse 后，一般的元素的表現與 visibility: hidden 一樣，也即其會占用空間。但如果該元素是與 table 相關的元素，例如 table row、table column、table column group 等，其表現卻跟 display: none 一樣，也即其占用的空間會釋放。
在不同瀏覽器下，對 visibility: collapse 的處理方式不同：
- 1、visibility: collapse 的上述特性僅在 Firefox 下起作用。
- 2、在 IE 即使設置了 visibility: collapse，還是會顯示元素。
- 3、在 Chrome 下，即使會將元素隱藏，但無論是否是與 table 相關的元素，visibility: collapse 與 visibility: hidden 沒有什么區別，即仍會占用空間。