CSS教程：inline-block在各浏览器的显示

CSS教程：inline-block在各浏览器的显示

inline-block 是 CSS 中常用的一个属性，用于将元素设置成内联块级元素。在各种布局样式中，inline-block 常常用来解决一些文本和块元素混排的问题。但是，在不同的浏览器中，inline-block 显示效果存在差异。接下来我们就来详细讲解一下 inline-block 在各浏览器的显示问题。

IE 下的 inline-block

在 IE8 及其以下版本中，inline-block 并不能正常的工作。元素将会显示成 inline 元素。

这个问题的解决方法，常见有两种：

1. 为元素设置 display: inline-block; 和 zoom:1; 属性

display:inline-block;
zoom:1;
*display:inline;

2. 使用 display: inline-table; 属性来模拟 inline-block

display:inline-table;

Firefox 下的 inline-block

在 Firefox 中，inline-block 显示正常。但是，当有多个元素设置为 inline-block 后，元素之间会出现间隙。

这个问题的解决方法，可以在包含元素上设置 font-size:0 属性，或在元素之间加上注释，但是这样会很不方便。

不过，有另外一种方法可以解决这个问题，就是在包含元素上设置 letter-spacing: -4px; 属性。

.parent{
  letter-spacing:-4px;
}
.parent .item{
  display:inline-block;
}

Chrome/Safari 下的 inline-block

在 Chrome/Safari 中，inline-block 显示正常。

但是，在 Chrome 56 及以下版本中，inline-block 的块级元素尺寸如果发生了变化，会导致元素闪烁的问题。这个问题可以通过 -webkit-transform:translateZ(0) 属性来解决。

.element{
  display:inline-block;
  -webkit-transform:translateZ(0);
  -moz-transform:translateZ(0);
  transform:translateZ(0);
}

以上，就是对 inline-block 在各浏览器中显示的整个攻略。希望可以帮到大家。

示例1

在以下代码中，我们通过为元素设置 float:left 属性，造成了元素之间无法正常排列的问题。

<div class="parent">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
</div>

.item{
  display:inline-block;
  width:25%;
  height:50px;
  background:#ccc;
  float:left;
}

解决方法如下所示：

.item{
  display:inline-block;
  width:25%;
  height:50px;
  background:#ccc;
  vertical-align:top;
}

示例2

在以下代码中，我们试图通过 margin:0 auto; 属性让元素自动居中。但是，因为 inline-block 元素默认是有一个 margin-right 的，所以，结果是并没有达到我们想要的效果。

<div class="parent">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
</div>

.item{
  display:inline-block;
  width:200px;
  height:50px;
  background:#ccc;
  margin:0 auto;
}

解决方法如下所示：

.parent{
  text-align:center;
}
.item{
  display:inline-block;
  width:200px;
  height:50px;
  background:#ccc;
  text-align:left;
}