我當時回答的是，二者皆能實現隱藏元素，但是將元素設定為display:none；之後，會同時取消該元素之前佔據的文檔流空間，但是visibility:hidden;使得該元素即使不顯示，但是依舊會佔據空間。
當時是電話面試，我回答了之後，對方也沒有再繼續問與display相關的知識。
現在想起來，真的是慶幸，如果人家問我與display相關的知識，display:inline-block使用時需要注意的地方。我肯定也打不上來。
前幾天練習寫導航時，由於總需要將一些行內元素或區塊級元素設定為行內區塊級元素，所以我就想到display:inline-block
但是，我發現這是一個屬性值還是有些學問的。推薦這篇文章。
以下都是針對IE 5.5、6、7 、8（Q）瀏覽器而言
行內元素display:inline-block
只需要對行內元素進行display:inline-block，或是zoom:1；就可以觸發hasLayout，然後就可以設定該行內元素的寬高。
display:inline-block;*zoom:1;
在zoom前面加上*是為了讓該屬性只針對ie瀏覽器才被識別。還有其他方法。這裡細說
區塊級元素display:inline-block
區塊級元素透過display:inline-block觸發hasLayout，並不能使得該區塊級元素具備不換行的特性。這也正是支持不完整的體現，彌補方法：
display:inline; zoom:1;
先轉換成行內元素，然後再讓他擁有版面。
結合現代瀏覽器當我們想要讓一個元素轉換為行內區塊級元素時，需要做的就是：
`display:inline-block;`/*兼容现代浏览器，IE6、7 行内元素*/ `*display:inline;`/*兼容IE6、7块级元素*/
*zoom :1;
【另一個由行內元素引發的問題】就是行內元素之間會有一定的空白邊距，這是為什麼。
寫上一篇筆記時我還不明白，不過看了剛才推薦的那篇博客，我倒是明白了。 瀏覽器渲染行內元素，就彷彿在渲染一個段落裡面的字，或者單字，
我們在寫hello與buddy之間有一個空格，
<p>hello buddy</p>
在寫行內元素時，每個行內元素之間都會習慣性的被換行
<span>hello</span> <span>buddy</span>
通常情況下，對於多個連續的空白符（空格，換行符，回車符等），瀏覽器會將他們合併為一個空白符。
如何移除行內元素之間的空白間隙
#對行內元素的父元素使用font-size:0px;
font-size:0px;
除去IE6、7與safri5之前的版本使用此方法都可以除去行內元素的空白間隙。
對行內元素的父元素進行letter-spacing
這個方法可以除去safri5之前的版本的行內元素之間的空白間隙。
行內元素之間的空白間隙與字體大小有關係，字號越大，其間隙也就越大，letter-spacing 負值的絕對值大於空隙大小後，內部行內元素會發生重疊。
letter-spacing:-2px;//这个2px等于元素之间的间隙
對行內元素的父元素進行white-space
font-size:0;/* 所有浏览器 */ letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */ `*letter-spacing:normal;` word-spacing:-1px;/* IE6、7 */
上面的寫法基本上相容了各個瀏覽器。
要注意的是，在ie6、7中為了避免letter-spacing與word-spacing之間的衝突，需要 hack 掉 letter-spacing。
由于这些文本属性都会继承下去，造成行内元素内部的文字内容受到影响，所以需要为行内元素内部重新设置字体属性值。
font-size: 12px; letter-spacing: normal; word-spacing: normal;
刚才推荐的那篇文章，总结了代码如下：
.dib-wrap修饰行内元素的父级元素，.dib修饰行内元素，另外需要注意由于 inline-block 具有 inline 元素的特性，在垂直方向上很多时候我们并不希望元素以「vertical-align:baseline」方式来呈现，所以在「.dib-wrap」中统一重置为「vertical-align:top」即可
.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
.dib {
display: inline-block;
`*display:inline;`
`*zoom:1;`
}以上是display:none;與visibility:hidden;的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
