清除inline-block行间距

做导航栏将子元素设为inline-block是最常用的方法。但不曾想，会出现以下情况：

这应该是一个很常见的问题，但现在才明白这个问题的由来和解决方法，容我先找个地洞藏一会。找到一篇非常全面的文章，inline-block元素间间隙产生及去除详解。在这里，我主要总结自己觉的比较好的解决方法，并结合自己的问题及理解做个记录。
之前做项目的时候其实已经遇到了这个问题，但因为自己并不理解这个问题的出现原因，走了很多弯路。以为是子元素设置padding导致。后来才发现这是由于标签换行产生空白字符导致；

理解了产生原因，也就不难理解几种可用的解决方法了：

1.最讨巧的就是改变html结构的几种写法，指导思想其实都是让标签不换行，但机动性太差，不建议使用，代码贴在下面，看看就好。

<div class="nav">
        <div class="nav-item">我是导航栏</div><div class="nav-item">我是导航栏</div><div class="nav-item">我是导航栏</div><div class="nav-item">我是导航栏</div>
</div>

.nav {
  width: 100%; 
}
.nav .nav-item {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.nav-item采用了兼容写法。由于IE7及以下浏览器不支持直接将元素设置为内联块，所以采取变通方式，先将block level元素设置为inline，然后再去触发该元素的hasLayout，使其拥有和inline-block相似的特性；

2.父元素设置font-size为0

还是基于“签换行产生空白字符”这个根本原因。上一种方法是让标签不换行，那么我同样也可以实现结构上换行，但是不产生空白字符，途径就是设置fon-size为0（PS：font-size设为0其实是一个非常灵活的处理方法，可以解决很多问题。例如制作响应式页面，希望侧边菜单栏宽度减小，只保留图标，但菜单名称消失，就可以将font-size设为0，当然前提是图标使用图片，而非字体图标）。子元素的字体可以正常设置。

这种方式还是存在兼容性问题。老版本Chrome浏览器有最小字体限制，可以通过设置-webkit-text-size-adjust:none来解决。

<div class="nav">
        <div class="nav-item">我是导航栏</div>
        <div class="nav-item">我是导航栏</div>
        <div class="nav-item">我是导航栏</div>
        <div class="nav-item">我是导航栏</div>
</div>

.nav {
  width: 100%; 
  font-size:0;
  webkit-text-size-adjust:none;
}
.nav .nav-item {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  font-size:14px
}

• IE8及以上浏览器, Firefox, Opera, Safari6, Chrome18可直接使用此方案；

3.全浏览器兼容方案

<div class="nav">
        <div class="nav-item">我是导航栏</div>
        <div class="nav-item">我是导航栏</div>
        <div class="nav-item">我是导航栏</div>
        <div class="nav-item">我是导航栏</div>
</div>

.nav {
  width: 100%; 
  font-size:0;
  webkit-text-size-adjust:none;
  [;font-size:12px;];
  *font-size:0;
  font-family:arial;
  [;letter-spacing:-3px;];
  *letter-spacing:normal;
  *word-spacing:-1px;
}
.nav .nav-item {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  font-size:14px;
  letter-spacing:normal;
  word-spacing:normal;
}

• 该方案主要是为了解决较低版本的Chrome和Safari的兼容问题。由于空白字符间隙与字体相关（字体与间隙对应表），为了方便设置letter-spacing数值，我们将字体设为在Windows和Mac OS中都有的arial字体，在此字体下，字号为12px时，间隙变成3px。[;font-size:12px;]是一个hack，可被IE7及以下浏览器也能识别，所以用 *font-size:0 重置一次。

• 所有主流浏览器均可以使用该方案。

• 这里还遇到一个问题。我采用sass整理这些样式，在.scss文件中直接写[;font-size:12px;]，sass报错，查资料发现有同行采用将hack中的特殊字符，如”[;”设为变量“$l”，引用时“#{$l}”加到相应位置。示例代码如下：

@mixin nav{
    $l:'[;';
    $r:';]';
    font-size: 0;
    -webkit-text-size-adjust:none; 
    *font-size:0; 
    #{$l}font-size:12px#{$r};
    font-family:arial;
    #{$l}letter-spacing:-3px#{$r};
    *letter-spacing:normal;
    *word-spacing:-1px;  
}

好，到这里我的问题已经介绍完了。希望大家都能多锤炼技术，多赚钱了。

后记：
最近在做vue项目，调用template进行列表渲染时，发现一组inline-block元素竟然位置有区别，百思不得其解，问题如下：

上面一行没有使用列表渲染；
对line-block元素及其父元素进行清除行间距处理后，果然问题解决了。
推测：template从结构商让元素连在一起，无意中通过方法1消除了行间距。