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

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

浏览器缝隙大小(PX)备注
Firefox4 
Chrome5
IE4
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;在不同浏览器下显示结果也不一样,上述的两种解决方案能够兼容所有情况!

发布了30 篇原创文章 · 获赞 19 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览