html中inline-block出现缝隙间距的解决方案

不同浏览器之间的间隔距离是不一样的，亲测有下面4中情况

浏览器	缝隙大小(PX)	备注
Firefox	4
Chrome	5
IE	4
qq，360，搜狗等浏览器	8

html显示：

出现这个问题的原因就是：

1.代码部分标签之间出现空格

像这样：

<div>
    <a href=""></a><!-- 这些都是缝隙 -->
    <a href=""></a><!-- 这些都是缝隙 -->
    <a href=""></a><!-- 这些都是缝隙 -->
    <a href=""></a><!-- 这些都是缝隙 -->
</div>

2.使用自动化工程化开发最后都需要压缩html代码，这样子的话不会出现这个问题，也就是压缩后

像这样：

<div><a href></a><a href></a><a href></a><a href></a></div>这样就不会出现间隔

html显示：

inline-block出现的这种情况其实不需要太过于注重每个浏览器怎么表现，而是她的解决方案：

************************************************************************************************************

1.通过设置font-size值：

div{
    font-size: 0;
}
div>a{
    display: inline-block;
    font-size: 14px;
    *margin-left:-1px;/*IE6,7下兼容*/
    width:300px;
    height: 80px;
    background: #188eee;
}

2. 代码部分直接把a标签之间的空格删除，简单暴力，

<div><a href></a><a href></a><a href></a><a href></a></div>这样就不会出现间隔

备注：因为不同浏览器的间距不同，使用margin-left:-4px;在不同浏览器下显示结果也不一样，上述的两种解决方案能够兼容所有情况！

转载于:https://www.cnblogs.com/zj1024/p/8831154.html