去除inline-block元素间距的几种方法

平时制作页面的时候经常会用到inline-block属性的元素，而他们是有默认间距的。

今天制作移动端的时候又遇到这个问题，所以仅此记录一下

解决方法有：

第一种方法：加上 font-size:0; 和  font-size:12px; 不兼容safari浏览器，用行内元素李欢li，ie6下面中间有右间距1像素。

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}

第二种方法：改变html结构，都兼容

<ul class="test1">
    <li>
    关于我们</li><li>
    客户服务</li><li>
    招聘信息</li><li>
    隐私声明
    </li>
</ul>

或者

<ul class="test1">
    <li>关于我们</li
    ><li>客户服务</li
    ><li>招聘信息</li
    ><li>隐私声明</li>
</ul>

第三种，父元素中设置font-size:0,用来兼容chrome，firefox等浏览器，而使用letter-space:-N px来兼容safari:都兼容

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;letter-spacing: normal;word-spacing:normal;font-size:12px;}