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;`      }