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中文网其他相关文章！