inline-block元素间的空白间距解决方案

对于inline-block间的空白问题一直觉得很头疼，尝试过几种解决办法，自己感觉都不是很满意，今天在这总结一下

<ul>
       <li>首页</li>
       <li>二手房</li>
       <li>新房</li>
       <li>租房</li>
       <li>业主</li>
</ul>

       *{
              margin: 0;
              padding:0;
              border: 0;
              outline:0;
         }
         ul{
              list-style: none;
              text-align: center;
         }
         li{
              display:inline-block;
              padding: 0 15px;
              background-color: #1c9b93;
         }

这样写的效果是每个li元素跟下一个元素之间都有4px的间距，下面说一下解决办法：

方法一：改变Html的结构，结构分为好多种，每种都能达到效果
（1）

<ul><li>首页</li><li>二手房</li><li>新房</li><li>租房</li><li>业主</li></ul>

好多人经常用这种方法，缺点是只能一行显示代码多的话会很难看而且很长，不易阅读；
（2）

<ul>
    <li>
          首页</li><li>
          二手房</li><li>
          新房</li><li>
          租房</li><li>
          业主</li>
</ul>

   这种写法相比（1）就更易阅读，而且接近标签换行格式的写法；
（3）

<ul>
    <li>首页</li
    ><li>二手房</li
    ><li>新房</li
    ><li>租房</li
    ><li>业主</li>
</ul>

   这种方法很相似，总结一下就是要让inline-block的标签首位相连不要换行；
  （4）

<ul>
    <li>首页</li><!--
    --><li>二手房</li><!--
    --><li>新房</li><!--
    --><li>租房</li><!--
    --><li>业主</li><!--
</ul>

  这种办法就是用注释来代替inline-block标签间的换行，我在项目中不会用这种方法，因为种感觉代码跟跟注释一起显得代码好乱。
总结：以上这四种办法都能解决问题，但是也有局限性，就是只是用于静态页面，如果页面是后台生成的就没办法了；
方法二：改变margin值

li{ margin-left: -4px; }

注：父元素的字体不同，margin值也会做相应调整，所以不推荐使用，依情况而定；
方法三：父元素的字体设置成0

         ul{
              list-style: none;
              text-align: center;
              font-size:0;
         }
         li{
              display:inline-block;
              padding: 0 15px;
              background-color: #1c9b93;
              font-size:14px;
         }

这种方法经常用，但是在Safari上不行
方法四：jquery方法，这种方法是从别人博客看到的

<ul id="removeBlank">
       <li>首页</li>
       <li>二手房</li>
       <li>新房</li>
       <li>租房</li>
       <li>业主</li>
</ul>

       *{
              margin: 0;
              padding:0;
              border: 0;
              outline:0;
         }
         ul{
              list-style: none;
              text-align: center;
         }
         li{
              display:inline-block;
              padding: 0 15px;
              background-color: #1c9b93;
         }

  $('#removeBlank'),contents().filter(function(){
     return this.nodeType === 3;
  }).remove();

这种方法是可以的，不过就是通过jquery认为有点麻烦

这里介绍了几种方法都有欠缺之处，大家根据需求选择，如果有更好的方法可以告诉我