inline-block引起的空白间隙的问题

当HTML+CSS布局时，明明宽度足够为何会换行？

 <div class="card-con">
     <div class="card-shop-item"></div>
     <div class="card-shop-item"></div>
     <div class="card-shop-item"></div>
     <div class="card-shop-item"></div>
 </div>

例如上述例子，外层card-con的div宽度为400px，内层div格式改为inline-block，宽度为100px，但会发生换行，无法达到预期效果。

原因：inline-block会引起元素和元素之间几个像素的间隙（具体间隙大小取决于字体大小）。造成空白间隙的原因是在标签和标签之间使用了空格或换行符。 因为空白字符也是字符，也会引用CSS样式。

解决方法1：既然空白间隙是由于换行或空格引起，那么消除换行符就解决了

但是，这个方法在chrome浏览器下没有效果，在IE6/7下残留1像素间隙。
HTML结构：

<ul>
    <li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>
</ul>

解决方法2：设置父元素的font-size为0，在子元素重新设置字体大小

ie8，firefox，chrome 和 opera 浏览器下已经没有问题了，但是在 低版本safari 浏览器下还是有问题。

*{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
        font-size: 0;
    }
    li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        font-size: 16px;    
    }

解决办法3： 利用负margin-left（不推荐，具体负margin多少取决于字体的大小）

*{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        margin-left: -5px;

    }

解决办法4 ：去掉闭合标签

<ul>
    <li>111
    <li>222
    <li>333
    <li>444
    <li>555
</ul>

不符合W3C标准