将display设置为inline-block之后产生间隙然后换行问题的解决方法

在我们会用display的时候，inline-block肯定不陌生吧，我今天在做项目的时候，用了inline-block,使a标签可以自定义宽度，但是随之而来的问题就是换行的BUG，如下图

特地加了一个border来看其间距，果不其然，会产生一定的间隙

解决方法1：浮动

没有什么是浮动解决不了的，如果有的话，那就用两次，在每个a标签上加个float：left，完美解决

 

解决方法2：父级元素font-size:0

这个方法比较偏一点，也是今天从我们老大那里刚刚得知的，css果然许多学问，

html{
　　-webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
}
父级元素{
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */
}
子元素{
font-size: 12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}

　　完美解决！