display:none;與visibility:hidden;的差別

我當時回答的是，二者皆能實現隱藏元素，但是將元素設定為display:none；之後，會同時取消該元素之前佔據的文檔流空間，但是visibility:hidden;使得該元素即使不顯示，但是依舊會佔據空間。
當時是電話面試，我回答了之後，對方也沒有再繼續問與display相關的知識。
現在想起來，真的是慶幸，如果人家問我與display相關的知識，display:inline-block使用時需要注意的地方。我肯定也打不上來。

前幾天練習寫導航時，由於總需要將一些行內元素或區塊級元素設定為行內區塊級元素，所以我就想到display:inline-block
但是，我發現這是一個屬性值還是有些學問的。推薦這篇文章。

• IE5.5開始，就已經開始支援inline-block，但要知道IE5.5是在2000年正式推出，但W3C在2002年才開始將這個屬性值加到css2.1草案中。

• IE 5.5、6、7 、8（Q）中區塊級元素對inline-block 支援不完整，如果要達到類似的效果，需要先設定為display:inline，然後使用zoom:1 等觸發hasLayout（這是引起IE瀏覽器出現bug的原因，我會再詳細寫的）。 IE 5.5、6、7 、8（Q）中 inline 元素欲達到 inline-block 的效果只需直接設定此屬性值或使用 zoom:1 等均可。

• 以下都是針對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中文網其他相關文章！